微信小程序实现下拉加载更多商品
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现下拉加载更多商品,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序下拉加载更多商品的具体代码,供大家参考,具体内容如下
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-: 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://.tanzhouweb./vueProject/vue.php?title=likeYou', suess(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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:vue实现图书管理系统
下一篇:微信小程序实现登录注册功能
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程