微信小程序实现下拉加载更多商品
互联网品牌圈关注到微信小程序实现下拉加载更多商品
这篇文章主要为大家详细介绍了微信小程序实现下拉加载更多商品，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序下拉加载更多商品的具体代码，供大家参考，具体内容如下
1. source code
<view class='goods'> <view class='good' wx:for="{{ goodslist }}" wx:key='index'> <view class='pic'> <image src='{{ item.imgUrl }}'></image> </view> <view class='title'> {{ item.des }} </view> <view class='desc'> <text class='price'>￥{{ item.price }}</text> <text class='paynum'> {{ item.alreadyPaid }} </text> </view> </view></view>
<button loading wx:if="{{loadmore}}"> loading... </button><button wx:else> 我是有底线的 </button>
wxss：
/* pages/loadmore/loadmore.wxss */
.goods{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20rpx; background-color: #ddd;}.good{ width: 370rpx; height: 528rpx; /* background-color: red; */ margin-bottom: 20rpx;}
.pic{ width: 370rpx; height: 370rpx;}.pic image{ width: 100%; height: 100%;}
.title{ font-size: 26rpx; padding: 20rpx; height: 52rpx; overflow: hidden;}.desc{ font-size: 23rpx; padding: 20rpx;}.paynum{ margin-left: 165rpx;}
js：
1
// pages/loadmore/loadmore.jsPage({
/** * 页面的初始数据 */ data: { data: [], // 所有数据 goodslist:[], // 展示数据 loadmore: true },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const that = this; wx.request({ url: 'http://www.tanzhouweb.com/vueProject/vue.php?title=likeYou', success(res){ const data = res.data; const goodslist = []; // 初始显示6条数据 data.forEach((item, index) => { if(index<6){ goodslist.push(item) } }); // console.log(data) that.setData({ goodslist, data }) } }) },
// 下拉触底执行（下拉触底添加后6条数据，直到所有数据加载完成） onReachBottom(e){ const {data, goodslist} = this.data; const start = goodslist.length; const end = Math.min( start + 6, data.length - 1); if(goodslist.length == data.length){ this.setData({ loadmore:false }) return ; } for(let i = start; i<=end; i++){ goodslist.push(data[i]) } this.setData({ goodslist }) }})
{ "usingComponents": {}, "navigationBarBackgroundColor": "#3366CC", "navigationBarTitleText": "商品加载", "navigationBarTextStyle": "white"}
2. 效果
初始显示6条数据，下拉触底加载后6条数据
生命周期函数： onLoad onReachBottom
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
来源：脚本之家
链接：https://www.jb51.net/article/203114.htm
尊敬的看官您对微信小程序实现下拉加载更多商品有什么看法呢？互联网品牌制作专家愿与您共同探讨！版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请加微信号oem365 举报，一经查实，本站将立刻删除。上一篇: Vue实现随机验证码功能 返 回 下一篇:vue实现树状表格效果
