这篇文章主要介绍“小程序下拉加载更多商品的效果怎样做，代码是什么”，有一些人在小程序下拉加载更多商品的效果怎样做，代码是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

本文实例为大家分享了微信小程序下拉加载更多商品的具体代码，供大家参考，具体内容如下

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

到此这篇关于“小程序下拉加载更多商品的效果怎样做，代码是什么”的文章就介绍到这了,更多相关小程序下拉加载更多商品的效果怎样做，代码是什么内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript字符串转数字怎样做？有什么方法？

  JavaScript字符串转数字怎样做？在实际的项目中，常需要实现数据类型转换，对此本文就给大家简单的介绍一下字符串转数字的方法，对新手学习JavaScript数据类型转换有一定的帮助，接下来我们一起看看吧。

• JS遍历二叉树如何实现，有哪些遍历算法

  众所周知javascript语言中只提供了几种基本类型的数据类型,而二叉树是一种数据结构,在一些查询等操作中能提供较好的性能,这篇文章主要给大家介绍了关于利用JS实现二叉树遍历算法的相关资料,需要的朋友可以参考下

• JS树状结构数据的增删改查处理操作是什么

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了处理树状结构数据的增删改查的相关问题，相比普通的数组结构数据，树状结构的处理就没有数组那么的直观，但是也没那么复杂，需要多一步递归查找来对数据进行深度遍历操作，下面一起来看一下，希望对大家有帮助。

• JS怎样实现一个网页音乐播放器功能？

  JS怎样实现一个网页音乐播放器功能？之前我们了解了用vue.js实现简单的播放器，今天我们来用JavaScript来实现更复杂一些的功能的音乐播放器，实现步骤、代码及效果如下，感兴趣的朋友可以了解看看。

• Vue3定义实现Message消息组件的方法是什么

  在大多数 web 产品中，全局的 Message 组件占有较大的使用场景，本文主要介绍了Vue3实现Message消息组件示例，需要的朋友们下面随着小编来一起学习学习吧