欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)下拉加載更多商品

 更新時(shí)間：2020年12月29日 14:45:42   作者：保護(hù)我方豆豆  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉加載更多商品，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序下拉加載更多商品的具體代碼，供大家參考，具體內(nèi)容如下

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({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 data: [], // 所有數(shù)據(jù)
 goodslist:[], // 展示數(shù)據(jù)
 loadmore: true
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 */
 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條數(shù)據(jù)
  data.forEach((item, index) => {
  if(index<6){
  goodslist.push(item)
  }
  });
  // console.log(data)
  that.setData({
  goodslist,
  data
  })
 }
 })
 },

 // 下拉觸底執(zhí)行（下拉觸底添加后6條數(shù)據(jù)，直到所有數(shù)據(jù)加載完成）
 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條數(shù)據(jù)，下拉觸底加載后6條數(shù)據(jù)

生命周期函數(shù)： onLoad onReachBottom

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論