scroll-view組件介紹

scroll-view是微信小程式提供的可滾動(dòng)視圖組件,其主要作用是可以用來(lái)做手機(jī)端經(jīng)常會(huì)看到的上拉加載下拉刷新列表頁(yè)!下面就以為例來(lái)講解一下這個(gè)元件的使用吧!

為app導(dǎo)入新page頁(yè)面

首先需要為我們的小程式導(dǎo)入新的page頁(yè),專(zhuān)案根目錄打開(kāi)app.json這個(gè)專(zhuān)案設(shè)定檔在裡面的pages數(shù)組添加"pages/allJoke/allJoke"然後設(shè)定底部導(dǎo)航在"tabBar"的列表項(xiàng)目("list")添加:

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

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

json設(shè)定頁(yè)

接下來(lái)就是我們新建page的設(shè)定頁(yè)了,在page目錄下新建一個(gè)目錄如alljoke,再在這個(gè)目錄下新建一個(gè)allJoke.json,複製下面程式碼到這個(gè)檔案裡面:

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

因?yàn)槲覀兇龝?huì)做下拉刷新時(shí)需要用到小程式提供的onPullDownRefresh方法,所以在設(shè)定項(xiàng)裡面必須開(kāi)啟enablePullDownRefresh.另外一個(gè)選項(xiàng)是頁(yè)頂標(biāo)題大家隨意設(shè)定也可以不用設(shè)定!

wxml視圖頁(yè)

好輪到視圖頁(yè)了,同樣的在alljoke目錄下新建一個(gè)alljoke.wxml頁(yè)面.wxml是小程式自創(chuàng)的一個(gè)視圖頁(yè)文檔類(lèi)型,其寫(xiě)法類(lèi)似html,對(duì)於前端來(lái)說(shuō)入門(mén)沒(méi)有難度.需要詳細(xì)了解的可以去閱讀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也在這裡隆重登場(chǎng)了!帶過(guò)來(lái)的是一長(zhǎng)串配置,就讓我來(lái)為大家講一下這些配置的作用吧!

用到的選項(xiàng)都列出來(lái)了,還有一點(diǎn)需要大家特別注意的:

使用垂直滾動(dòng)條時(shí)必須為組件設(shè)置一個(gè)固定高度就是上面代碼style裡面設(shè)定的高!切記切記!

更多資料請(qǐng)閱讀微信小程式scroll-view組件文檔

wxss樣式

同樣在alljoke目錄下面新進(jìn)allJoke.wxsscss小程式的樣式和傳統(tǒng)css同樣在alljoke目錄下面?？梢愿鶕?jù)自己喜好自行設(shè)計(jì),這裡我簡(jiǎn)單做了一下樣式比較醜大家將就著用吧.(題外話:受不了的自己動(dòng)手豐衣足食)

.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; 
}

小程序文檔中關(guān)於樣式的介紹

邏輯部分

來(lái)到最後也是最重要的邏輯部分了!老規(guī)矩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: &#39;加載中&#39;,
    icon: &#39;loading&#39;,
    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()函數(shù)註冊(cè)頁(yè),然後在data裡面定義一些初始化資料.onLoad是這個(gè)頁(yè)面的生命週期函數(shù),頁(yè)面載入時(shí)會(huì)調(diào)用到它.我們?cè)陧?yè)面載入時(shí)調(diào)用了自訂的getList函數(shù).這個(gè)函數(shù)接收兩個(gè)參數(shù),第一個(gè)參數(shù)是要載入的頁(yè)面,第二個(gè)參數(shù)是布林值,用來(lái)判斷是下拉刷新調(diào)用的這個(gè)函數(shù),還是頁(yè)面載入時(shí)調(diào)用的這個(gè)函數(shù)!接下來(lái)onPullDownRefresh是小程式提供的下拉刷新函數(shù),裡面wx.showToast顯示訊息提示框,用來(lái)提示使用者正在載入,loadMore是捲動(dòng)到底部觸發(fā)的事件.函式裡面會(huì)檢查是否已經(jīng)載入了全部清單項(xiàng)目,如果已經(jīng)載入了全部清單項(xiàng)目會(huì)return掉,如果資料庫(kù)還有清單項(xiàng)目,上拉到底部加載下一頁(yè)!scrll函數(shù)是滾動(dòng)時(shí)觸發(fā)的函數(shù),可以看到這個(gè)函數(shù)會(huì)判斷滾動(dòng)條位置是否大於六百,如果大於六百顯示點(diǎn)擊直達(dá)底部的按鈕,如果小於六百隱藏直達(dá)頂部的按鈕.同時(shí)會(huì)更新滾動(dòng)條位置的參數(shù).剛剛在講wxml時(shí)已經(jīng)講過(guò)scroll-view組件設(shè)置垂直滾動(dòng)條位置scroll-top設(shè)定項(xiàng)時(shí)如果參數(shù)一樣,頁(yè)面不會(huì)重新渲染,我們就是利用了這一點(diǎn),如果要到達(dá)頂部,位置必定是'0',滾動(dòng)時(shí)觸發(fā)scrll函數(shù),我們把位置資訊設(shè)為'1',因?yàn)闈L動(dòng)函數(shù)會(huì)反復(fù)觸發(fā),所以此時(shí)頁(yè)面是不會(huì)渲染的.也就是說(shuō)由於位置設(shè)定參數(shù)都是設(shè)定為'1'不變,導(dǎo)致scroll-top設(shè)定項(xiàng)不會(huì)生效為goTop函數(shù)的直達(dá)頂部(把參數(shù)變?yōu)?0'提供機(jī)會(huì)).最後就是直達(dá)頂部按鈕的函數(shù)了,可以看到它是把位置資訊變成'0',參數(shù)變化scroll-top設(shè)定生效,頁(yè)面直達(dá)頂部.最後再透過(guò)改變hidden這個(gè)參數(shù)把自己(直達(dá)頂部按鈕)給隱藏掉了!

結(jié)尾

ok,透過(guò)上面的步驟我們終於實(shí)現(xiàn)了下拉刷新上拉加載的列表頁(yè)功能了,從上面我們可以看到微信提供的接口和api還是挺全面的,要實(shí)現(xiàn)一個(gè)功能總體來(lái)說(shuō)要比原生js實(shí)現(xiàn)要簡(jiǎn)單一些!

感謝閱讀，希望能幫助大家，謝謝大家對(duì)本站的支持！

更多微信小程式 scroll-view元件實(shí)作清單頁(yè)實(shí)例碼相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！