【移动应用开发技术】微信小程序加载更多和点击查看更多的实现方法

【移动应用开发技术】微信小程序加载更多和点击查看更多的实现方法

这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方法的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。具体内容如下微信小程序加载更多，是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData，下面是一个简单的栗子：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:[]

},

//初始化请求

onLoad:

function

(res)

{

var

that

=

this

//内容

wx.request({

url:

'/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)

{

var

duanziInfoBefore

=

this.data.duanziInfo

var

that

=

this

wx.showToast({

//期间为了显示效果可以添加一个过度的弹出框提示“加载中”

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

//打印拼接之后数据

that.setData({

loadText:"数据请求中",

loading:true,

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

loadText:"加载更多",

loading:false,

})

}

})

}

})初始化和加载更多中的打印数据如下（以上是点击查看更多，还可以根据距离视图区域的距离来加载更多，具体实现是将视图用<scroll-view>标签，并给其一个固定高度，在给定参数中设置距离像素触发事件。具体文档：/debug/wxadoc/dev/component/scroll-view.html?t=20161122）感谢各位的阅读！关于“