小程式下滑時能實現載入更多資料
阿新 • • 發佈:2021-10-20
wxml程式碼:
<view class="scroll"> <!-- 綁訂頁面上拉觸底事件的處理函式onReachBottom事件 --> <scroll-view scroll-y="{{true}}" style="height: 400px;" bindscrolltolower="onReachBottom"> <view>{{test}}</view> <!-- 引數迴圈data js中的data 資料 --> <block wx:for="{{datas}}" wx:key="index"> <!-- 頁面渲染 --> <view>{{item.content}}</view> </block> </scroll-view> </view>
wxjs程式碼:
// pages/pre/pre.js Page({ /** * 頁面的初始資料 */ data: { focus:false, test:'fsdafa', datas:[ {id:1,content:'021/10/20'}, {id:2,content:'021/10/20'}, {id:3,content:'021/10/20'}, {id:4,content:'021/10/20'}, {id:5,content:'021/10/20'} ] }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { let datass=[ {id:6,content:'021/10/20'}, {id:7,content:'021/10/20'}, {id:8,content:'021/10/20'}, {id:9,content:'021/10/20'} ] let that=this let arr=that.data.datas.concat(datass); this.setData({ datas:arr }) },
效果圖: