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


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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
用JS创建一个录屏功能
Nov 11 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合并两个数组的两种方式的异同
2012/09/14 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python将图片转base64,实现前端显示
2020/01/09 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Python装饰器详细介绍
2022/03/25 Python