圆月山庄资源网 Design By www.vgjia.com
本文实例为大家分享了微信小程序下拉加载更多商品的具体代码,供大家参考,具体内容如下
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"htmlcode">{ "usingComponents": {}, "navigationBarBackgroundColor": "#3366CC", "navigationBarTitleText": "商品加载", "navigationBarTextStyle": "white" }2. 效果
初始显示6条数据,下拉触底加载后6条数据
生命周期函数: onLoad onReachBottom
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年06月14日
2024年06月14日
- FRUITSZIPPER《NEWKAWAII》2024[WAV+CUE]
- 群星《被遗忘的时光1-2》国语经典情歌4CD[WAV+CUE]
- 国产类魂《明末》新预告!2025年发售 首发XGP
- 《黑神话:悟空》新CG由《流浪地球》背后视效公司打造 郭帆力挺
- IGN法国开团《黑神话》遭群嘲:建议先读读西游记
- 鲍翠薇.1984-决战玄武门(LP版)【娱乐唱片】【WAV+CUE】
- 徐若瑄.2008-绝对收藏2CD【SONY】【WAV+CUE】
- 梦剧院.1991-新曲+精丫乐意唱片】【WAV+CUE】
- ECHO.1991-准许我爱你【丰艺】【WAV+CUE】
- 群星.2005-丰华十年.就爱好音乐3CD【丰华】【WAV+CUE】
- 陈明真.1991-我用自己的方式爱你【华星】【WAV+CUE】
- 黄家驹《怀念专辑》纯银版[WAV+CUE][730MB]
- 邓丽君《黄金唱片》DSD+SBM版[WAV+CUE][470MB]
- 陈百强《感恩有你》DSD+SBM版[WAV+CUE][560MB]
- 世界启元光秀强度怎么样 光秀属性面板解析