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


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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
简单的渐变轮播插件
Jan 12 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
实用的Vue开发技巧
May 30 Javascript
微信小程序实现登录注册功能
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 Ajax中文乱码问题解决方法
2009/02/27 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
使用php清除bom示例
2014/03/03 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python编程求质数实例代码
2018/01/31 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
pandas中的series数据类型详解
2019/07/06 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
快速创建python 虚拟环境
2020/11/28 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
车辆转让协议书
2014/04/15 职场文书
项目申请汇报材料
2014/08/16 职场文书
律师授权委托书范本
2014/10/07 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers