微信小程序实现下拉加载更多商品


Posted in Javascript onDecember 29, 2020

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

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

微信小程序实现下拉加载更多商品

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
微信小程序实现登录注册功能
Dec 29 #Javascript
Vue实现随机验证码功能
Dec 29 #Vue.js
js闭包的9个使用场景
Dec 29 #Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 #Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
document.getElementById介绍
2011/09/13 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
python删除文本中行数标签的方法
2018/05/31 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
店长岗位职责
2013/11/21 职场文书
银行实习生的自我评价
2013/12/09 职场文书
基层干部十八大感言
2014/01/19 职场文书
高中体育教学反思
2014/01/24 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
腾讯广告词
2014/03/19 职场文书
人事任命书格式
2014/06/05 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
党支部半年考察意见
2015/06/01 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技