微信小程式實現下拉載入更多商品
阿新 • • 發佈:2020-12-31
本文例項為大家分享了微信小程式下拉載入更多商品的具體程式碼,供大家參考,具體內容如下
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.js Page({ /** * 頁面的初始資料 */ 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
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。