微信小程序加载更多和点击查看更多的实现方法

  介绍

这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

具体内容如下

微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData、下面是一个简单的栗子:

索引。wxml代码如下

& lt; view 天气:为=皗{duanziInfo}},,天气:项=皀ame",天气:对于指数=癷d"祝辞,   ,& lt; view 类=癲uanzi-view"祝辞,   ,& lt; view 类=癲uanzi-content"祝辞,   ,& lt; text 类=癲z-content"在{{name.content}} & lt;/text>,   & lt;/view>大敌;   & lt;/view>大敌;   时间/view> & lt;   & lt; view 类=癰utton-wrapper"祝辞,   ,& lt; button 类型=癲efault",大?癲efault",加载=皗{加载}}“,禁用=皗{禁用}}“,bindtap=皊etLoading"祝辞,   ,{{loadText}}   & lt;/button>大敌;   & lt;/view>

<强>加载更多按钮强绑定<强> setLoading

索引。js文件代码如下

页面({,   数据:,{大敌;   loadText才能:& # 39;加载更多& # 39;,,   duanziInfo:[],才能   },大敌;   ,//初始化请求,   ,onLoad: function  (res), {,   ,var  that =,却,能够   ,//内容,   wx.request({大敌;   ,,url: & # 39; http://xxxxx.com/index.php?m=Industry&, a=getDuanziInfo& # 39;,,   ,,数据:{令牌,令牌},,   ,,方法:& # 39;得到# 39;,,   ,,成功:函数(res) {,   console.log才能(res.data.result),//打印初始化数据,   ,that.setData({大敌;   duanziInfo才能:res.data.result    }),才能   ,,},   })大敌;   },大敌;   ,//加载更多,   ,setLoading:函数(e), {,   ,var  duanziInfoBefore =, this.data.duanziInfo    ,var  that =,却,能够   ,wx.showToast({//期间为了显示效果可以添加一个过度的弹出框提示“加载中”,   标题:才能,& # 39;加载中& # 39;,,   图标才能:& # 39;加载# 39;,,   ,,时间:200年,   }),才能   wx.request({大敌;   ,,url: & # 39; http://xxxxx.com/index.php?m=Industry&, a=getDuanziInfo& # 39;,,   ,,数据:{令牌,令牌},,   ,,方法:& # 39;得到# 39;,,   ,,成功:函数(res) {,   console.log才能(duanziInfoBefore.concat (res.data.result)),//打印拼接之后数据,   ,that.setData({大敌;   loadText才能:“数据请求中,,,   加载:真的,,才能   duanziInfo才能:duanziInfoBefore.concat (res.data.result),   loadText才能:“加载更多,,,   加载才能:假的,,   }),才能   ,,},   })大敌;   }大敌;   })

初始化和加载更多中的打印数据如下

微信小程序加载更多和点击查看更多的实现方法

(以上是点击查看更多,还可以根据距离视图区域的距离来加载更多,具体实现是将视图用& lt; scroll-view>标签,并给其一个固定高度,在给定参数中设置距离像素触发事件。具体文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122)

感谢各位的阅读!关于“微信小程序加载更多和点击查看更多的实现方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

微信小程序加载更多和点击查看更多的实现方法