首頁 > 微信小程式 > 小程式開發 > 微信小程式清單下拉刷新上拉載入實例程式碼

微信小程式清單下拉刷新上拉載入實例程式碼

小云云
發布: 2018-02-03 09:02:21
原創
3508 人瀏覽過

本文主要和大分享微信小程式實現列表下拉刷新上拉加載,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。

DEMO下載

效果圖

微信小程式清單下拉刷新上拉載入實例程式碼

#原則


  • #利用微信小程式的onPullDownRefresh函數(下拉刷新監聽函數)和onReachBottom函數(上拉載入監聽函數)監聽頁面的下拉和上拉動態,從而對頁面資料進行修改!

  • 頁面設定JSON


enablePullDownRefresh:開啟下拉刷新;


onReachBottomDistance:頁面上拉觸底事件觸發時距頁面底部距離,單位為px。



{
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 50
}
登入後複製

WXML

<view class="tui-content">
 <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>
登入後複製
JS

此處用setTimeout模擬請求資料;

載入資料限制三次,呼叫wx.showToast顯示沒有更多資料。


總結#########必須在每次資料要求完成後,使用wx.stopPullDownRefresh()停止下拉刷新。 ######相關推薦:############微信小程式 清單的上拉載入和下拉刷新的實作#######

以上是微信小程式清單下拉刷新上拉載入實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板