1. 程式人生 > 其它 >小程式下滑時能實現載入更多資料

小程式下滑時能實現載入更多資料

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 }) },

效果圖: