微信小程序scroll-view組件如何實現列表頁

這篇文章主要介紹了微信小程序scroll-view組件如何實現列表頁，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

scroll-view組件

scroll-view是微信小程序提供的可滾動視圖組件,其主要作用是可以用來做手機端經常會看到的上拉加載下拉刷新列表頁!下面就以<搖出微笑>為例來講解一下這個組件的使用吧!

為app導入新page頁面

首先需要為我們的小程序導入新的page頁面,項目根目錄打開app.json這個項目配置文件在里面的pages數組添加"pages/allJoke/allJoke"然后設置底部導航在"tabBar"的列表項("list")添加:

{
  "text": "列表",
  "pagePath": "pages/allJoke/allJoke",
  "iconPath": "images/note.png",
  "selectedIconPath": "images/noteHL.png"
 },

如果大家要了解具體配置的含義可以參考小程序配置文檔這里不再贅述!

json配置頁

接下來就是我們新建page的配置頁了,在page目錄下新建一個目錄如alljoke,再在這個目錄下新建一個allJoke.json,復制下面代碼到這個文件里面:

{
  "navigationBarTitleText": "笑話集錦",
  "enablePullDownRefresh": true
}

因為我們待會做下拉刷新時需要用到小程序提供的onPullDownRefresh方法,所以在配置項里面必須開啟enablePullDownRefresh.另外一個選項是頁頂標題大家隨意設置也可以不用設置!

wxml視圖頁

好輪到視圖頁了,同樣的在alljoke目錄下新建一個alljoke.wxml頁面.wxml是小程序自創的一個視圖頁文檔類型,其寫法類似html,對于前端來說入門沒有難度.需要詳細了解的可以去閱讀wxml文檔.同樣復制以下代碼到alljoke.wxml里面

<view>
 <view>
  <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll"  bindscrolltolower="loadMore">
   <view class="block" wx:for="{{listLi}}" wx:for-item="item">
    <text>{{item.text}}</text>
   </view>  
  </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">?</view>
</view>

大家可以看到,我們的主角scroll-view也在這里隆重登場了!帶過來的是一長串配置,就讓我來為大家講一下這些配置的作用吧!

用到的選項都列出來了,還有一點需要大家特別注意的:

使用豎向滾動條時必須為組件設置一個固定高度就是上面代碼style里面設置的高!切記切記!

更多資料請閱讀微信小程序scroll-view組件文檔

wxss樣式

同樣在alljoke目錄下面新建allJoke.wxss文件,小程序的樣式和傳統css差不多大家可以根據自己喜好自行設計,這里我簡單做了一下樣式比較丑大家將就著用吧.(題外話:受不了的自己動手豐衣足食)

.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
}

小程序文檔中關于樣式的介紹

邏輯部分

來到最后也是最重要的邏輯部分了!老規矩alljoke目錄下新建allJoke.js文件,先貼代碼再慢慢講解:

Page({
 data:{
  listLi:[],
  page:1,
  scrollTop:0,
  done: false,
  hidden: true
 },
 onLoad:function(options){
  this.getList(1);
 },
 
 onPullDownRefresh: function(){
  wx.showToast({
   title: '加載中',
   icon: 'loading'
  });
  this.getList(1,true);
 },
 
 getList: function(page, stopPull){
  var that = this
  wx.request({
   url: 'https://wechat.sparklog.com/jokes',
   data: {
    page: page,
    per: '20'
   },
   method: 'GET', 
   success: function(res){
    if(page===1){
     that.setData({
      page: page+1,
      listLi: res.data,
      done: false
     })
     if(stopPull){
      wx.stopPullDownRefresh()      
     }
    }else{
     if(res.data<20){
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data),
       done: true
      }) 
     }else{
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data)
      }) 
     }  
    }
   },
  })
 },
 
 loadMore: function(){
  var done = this.data.done;
  if(done){
   return
  }else{
   wx.showToast({
    title: '加載中',
    icon: 'loading',
    duration: 500
   });
   var page = this.data.page;
   this.getList(page)
  }
 },
 
 scrll: function(e){
  var scrollTop = e.detail.scrollTop
  if(scrollTop>600){
   this.setData({
    scrollTop: 1,
    hidden: false   
   })
  }else{
   this.setData({
    scrollTop: 1,
    hidden: true 
   });
  }
 },
 
 goTop: function(){
  this.setData({
   scrollTop:0,
   hidden: true
  })
 }
})

大家可以看到首先我們需要用page()函數注冊頁面,然后在data里面定義一些初始化數據.onLoad是這個頁面的生命周期函數,頁面加載時會調用到它.我們在頁面加載時調用了自定義的getList函數.這個函數接收兩個參數,第一個參數是要加載的頁面,第二個參數是布爾值,用來判斷是下拉刷新調用的這個函數,還是頁面加載時調用的這個函數!接下來onPullDownRefresh是小程序提供的下拉刷新函數,里面wx.showToast顯示消息提示框,用來提示用戶正在加載,loadMore是滾動到底部觸發的事件.函數里面會檢查是否已經加載了全部列表項,如果已經加載了全部列表項會return掉,如果數據庫還有列表項,上拉到底部加載下一頁!scrll函數是滾動時觸發的函數,可以看到這個函數會判斷滾動條位置是否大于六百,如果大于六百顯示點擊直達底部的按鈕,如果小于六百隱藏直達頂部的按鈕.同時會更新滾動條位置的參數.剛剛在講wxml時已經講過scroll-view組件設置豎向滾動條位置scroll-top設置項時如果參數一樣,頁面不會重新渲染,我們就是利用了這一點,如果要到達頂部,位置必定是'0',滾動時觸發scrll函數,我們把位置信息設置為'1',因為滾動函數會反復觸發,所以此時頁面是不會渲染的.也就是說由于位置設置參數都是設置為'1'不變,導致scroll-top設置項不會生效為goTop函數的直達頂部(把參數變為'0'提供機會).最后就是直達頂部按鈕的函數了,可以看到它是把位置信息變為'0',參數變化scroll-top設置生效,頁面直達頂部.最后再通過改變hidden這個參數把自己(直達頂部按鈕)給隱藏掉了!

結尾

ok,通過上面的步驟我們終于實現了下拉刷新上拉加載的列表頁功能了,從上面我們可以看到微信提供的接口和api還是挺全面的,要實現一個功能總體來說要比原生js實現要簡單一些!

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序scroll-view組件如何實現列表頁”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!