點擊查看更多(微信小程序加載更多和點擊查看更多的實現方法)

具體內容如下

微信小程序加載更多,是將之前的數據和點擊加載后請求的數據用concat拼接在一起并執行setData,下面是一個簡單的栗子:

index.wxml代碼如下

<viewwx:for="{{duanziInfo}}"wx:for-item="name"wx:for-index="id"><viewclass="duanzi-view"><viewclass="duanzi-content"><textclass="dz-content">{{name.content}}</text></view></view></view><viewclass="button-wrapper"><buttontype="default"size="default"loading="{{loading}}"disabled="{{disabled}}"bindtap="setLoading">{{loadText}}</button></view>

加載更多按鈕綁定setLoading

index.js文件代碼如下

Page({data:{loadText:'加載更多',duanziInfo:[]},//初始化請求onLoad:function(res){varthat=this//內容wx.request({url:'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',data:{token:token},method:'GET',success:function(res){console.log(res.data.result)//打印初始化數據that.setData({duanziInfo:res.data.result})}})},//加載更多setLoading:function(e){varduanziInfoBefore=this.data.duanziInfovarthat=thiswx.showToast({//期間為了顯示效果可以添加一個過度的彈出框提示“加載中”title:'加載中',icon:'loading',duration:200})wx.request({url:'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',data:{token:token},method:'GET',success:function(res){console.log(duanziInfoBefore.concat(res.data.result))//打印拼接之后數據that.setData({loadText:"數據請求中",loading:true,duanziInfo:duanziInfoBefore.concat(res.data.result),loadText:"加載更多",loading:false,})}})}})

初始化和加載更多中的打印數據如下

(以上是點擊查看更多,還可以根據距離視圖區域的距離來加載更多,具體實現是將視圖用<scroll-view>標簽,并給其一個固定高度,在給定參數中設置距離像素觸發事件。具體文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122)

感謝各位的閱讀!關于“微信小程序加載更多和點擊查看更多的實現方法”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!