【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序加載更多和點(diǎn)擊查看更多的實(shí)現(xiàn)方法

這篇文章給大家分享的是有關(guān)微信小程序加載更多和點(diǎn)擊查看更多的實(shí)現(xiàn)方法的內(nèi)容。在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過來看看吧。具體內(nèi)容如下微信小程序加載更多，是將之前的數(shù)據(jù)和點(diǎn)擊加載后請(qǐng)求的數(shù)據(jù)用concat拼接在一起并執(zhí)行setData，下面是一個(gè)簡單的栗子：index.wxml代碼如下<view

wx:for="{{duanziInfo}}"

wx:for-item="name"

wx:for-index="id">

<view

class="duanzi-view">

<view

class="duanzi-content">

<text

class="dz-content">{{name.content}}</text>

</view>

</view>

</view>

<view

class="button-wrapper">

<button

type="default"

size="default"

loading="{{loading}}"

disabled="{{disabled}}"

bindtap="setLoading">

{{loadText}}

</button>

</view>加載更多按鈕綁定setLoadingindex.js文件代碼如下Page({

data:

{

loadText:'加載更多',

duanziInfo:[]

},

//初始化請(qǐng)求

onLoad:

function

(res)

{

var

that

=

this

//內(nèi)容

wx.request({

url:

'/index.php?m=Industry&a=getDuanziInfo',

data:

{token:token},

method:

'GET',

success:

function(res){

console.log(res.data.result)

//打印初始化數(shù)據(jù)

that.setData({

duanziInfo:res.data.result

})

}

})

},

//加載更多

setLoading:

function(e)

{

var

duanziInfoBefore

=

this.data.duanziInfo

var

that

=

this

wx.showToast({

//期間為了顯示效果可以添加一個(gè)過度的彈出框提示“加載中”

title:

'加載中',

icon:

'loading',

duration:

200

})

wx.request({

url:

'/index.php?m=Industry&a=getDuanziInfo',

data:

{token:token},

method:

'GET',

success:

function(res){

console.log(duanziInfoBefore.concat(res.data.result))

//打印拼接之后數(shù)據(jù)

that.setData({

loadText:"數(shù)據(jù)請(qǐng)求中",

loading:true,

duanziInfo:duanziInfoBefore.concat(res.data.result),

loadText:"加載更多",

loading:false,

})

}

})

}

})初始化和加載更多中的打印數(shù)據(jù)如下（以上是點(diǎn)擊查看更多，還可以根據(jù)距離視圖區(qū)域的距離來加載更多，具體實(shí)現(xiàn)是將視圖用<scroll-view>標(biāo)簽，并給其一個(gè)固定高度，在給定參數(shù)中設(shè)置距離像素觸發(fā)事件。具體文檔：/debug/wxadoc/dev/component/scroll-view.html?t=20161122）感謝各位的閱讀！關(guān)于“