微信小程序商城开发之商城首页福利场不限下拉刷新动态API数据怎么做 - 行业资讯

　　介绍

这篇文章主要介绍微信小程序商城开发之商城首页福利场不限下拉刷新动态API数据怎么做,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

效果展示

话不多说,直接看实现效果:

福利专场商品无限下拉展示。gif

电商首页回顾

功能模块jpg

如上图所示,电商首页只剩下第五个模块——福利专场,福利专场是商品列表集合我们将采用无限下来刷新的方式来实现改业务。

福利专场数据模型

福利专场API。png

福利专场API详情可以通过访问https://100boot.cn选择案例查看。

回家。wxml

福利专场商品列表布局

& lt; !——福利专场,开始——比; 　　& lt;才能view 类=皐elfare-container"祝辞, 　　& lt;才能view 类=癱ategory-title"比; 　　,,,& lt; text 类=皌itle"在福利专场& lt;/text> 　　,,,& lt; view 类=發ine_name"比; 　　,,,,,& lt; text>每天早10晚8准时上新& lt;/text> 　　,,,& lt;/view> 　　& lt;才能/view>,, 　　& lt;才能scroll-view scroll-y=皌rue"比; 　　,,,,,& lt; view 类=皐elfares"比; 　　,,,,,,,,& lt; block 天气:项=皗{newGoods}},,天气:关键=癷d"比; 　　,,,,,,,,,& lt; view 类=皐elfares-good", catchtap=癱atchTapCategory",数据对象名称=皗{item.name}}“, data-goodsid=皗{item.id}}“比; 　　,,,,,,,,,,,& lt; view> 　　,,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/image src=" {{item.imgUrl}} "类=皐elfares-image”模式=" widthFix "/> 　　　　<视图类="产品名称"> 　　{{item.name}} 　　<视图类=" product-price-wrap "> 　　

￥{{item.price}}

￥{{item.privilegePrice}}

{{item.discount}}折

福利专场商品列表下拉加载更多布局

,& lt; view 类=皐eui-loadmore",隐藏=皗{隐藏}}“比; 　　,,,& lt; view 类=皐eui-loading"祝辞& lt;/view> 　　,,,& lt; view 类=皐eui-loadmore__tips"在努力加载中& lt;/view> 　　& lt;才能/view>

回家。wxs

福利专场商品列表css样式

/* *=========福利专?===========* */.welfares { 　　,,显示:flex; 　　justify-content才能:左; 　　flex-direction:,才能行; 　　flex-wrap才能:包装; 　　保证金才能:10 px 5 px; 　　} 　　.welfares-good {/*,才能高度:,500 rpx;, */,,宽度:47%; 　　保证金才能:0 px 汽车; 　　,,margin-bottom: 20 px; 　　位置:,才能相对; 　　,,显示:inline-block; 　　,,字体大小:24 rpx;/*,才能边界:,1 px # eee 固体;,*/} 　　.welfares-image { 　　,,宽度:100%; 　　,,显示:inline-block; 　　边境才能:1 px # eee 固体,, 　　} 　　.welfares-good .product-name { 　　,,颜色:# 000;/*,才能高度:,28 px; */text-align才能:左; 　　,,,保证金:0 px 5 px;, 　　,,,margin-bottom: 5 px;, 　　} 　　.product-price-wrap { 　　,,身高:40 rpx; 　　} 　　, 　　.product-price-wrap .product-price-new { 　　,,颜色:# e80080; 　　margin-left才能:5 px; 　　粗细才能:900; 　　,,字体大小:30 rpx; 　　} 　　.product-price-wrap .product-price-old { 　　,,颜色:# 888; 　　文字修饰才能:线穿过; 　　,,padding-left: 2 px; 　　} 　　.product-price-wrap .discount { 　　位置:才能,绝对; 　　,,右:5 px; 　　,,背景颜色:# 000; 　　,,颜色:# fff; 　　}

福利专场商品列表下拉加载更多样式

/*,,加载更多,,*/.weui-loading { 　　保证金才能:0,5 px; 　　,,宽度:20 px; 　　,,身高:20 px; 　　,,显示:inline-block; 　　,,vertical-align:中间; 　　-webkit-animation才能:weuiLoading 1 s 步骤(12,,结束),无限; 　　动画:才能,weuiLoading 1 s 步骤(12,,结束),无限; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null