您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序商城開(kāi)發(fā)之商城首頁(yè)福利場(chǎng)不限下拉刷新動(dòng)態(tài)API數(shù)據(jù)怎么做,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
話不多說(shuō),直接看實(shí)現(xiàn)效果:
如上圖所示,電商首頁(yè)只剩下第五個(gè)模塊-福利專場(chǎng),福利專場(chǎng)是商品列表集合 我們將采用無(wú)限下來(lái)刷新的方式來(lái)實(shí)現(xiàn)改業(yè)務(wù)。
福利專場(chǎng)API詳情可以通過(guò)訪問(wèn) https://100boot.cn 選擇案例查看。
福利專場(chǎng)商品列表布局
<!--福利專場(chǎng) start--> <view class="welfare-container"> <view class="category-title"> <text class="title">福利專場(chǎng)</text> <view class="line_name"> <text>每天早10晚8準(zhǔn)時(shí)上新</text> </view> </view> <scroll-view scroll-y="true"> <view class="welfares"> <block wx:for-items="{{newGoods}}" wx:key="id"> <view class="welfares-good" catchtap="catchTapCategory" data-name="{{item.name}}" data-goodsid="{{item.id}}"> <view> <image src="{{item.imgUrl}}" class="welfares-image" mode="widthFix"/> </view> <view class="product-name"> {{item.name}} </view> <view class="product-price-wrap"> <p class="product-price-new">¥{{item.price}}</p> <p class="product-price-old">¥{{item.privilegePrice}}</p> <p class="discount">{{item.discount}}折</p> </view> </view> </block> </view> </scroll-view> </view> <!--福利專場(chǎng) end-->
福利專場(chǎng)商品列表下拉加載更多布局
<view class="weui-loadmore" hidden="{{hidden}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">努力加載中</view> </view>
福利專場(chǎng)商品列表css樣式
/**=========福利專場(chǎng)============**/ .welfares{ display: flex; justify-content: left; flex-direction: row; flex-wrap: wrap; margin:10px 5px; } .welfares-good{ /* height: 500rpx; */ width: 47%; margin:0px auto; margin-bottom: 20px; position: relative; display: inline-block; font-size: 24rpx; /* border: 1px #eee solid; */ } .welfares-image{ width: 100%; display: inline-block; border: 1px #eee solid; } .welfares-good .product-name{ color: #000; /* height: 28px; */ text-align:left; margin: 0px 5px; margin-bottom: 5px; } .product-price-wrap{ height: 40rpx; } .product-price-wrap .product-price-new{ color: #e80080; margin-left:5px; font-weight:900; font-size: 30rpx; } .product-price-wrap .product-price-old{ color: #888; text-decoration: line-through; padding-left: 2px; } .product-price-wrap .discount{ position: absolute; right: 5px; background-color: #000; color: #fff; }
福利專場(chǎng)商品列表下拉加載更多樣式
/* 加載更多 */ .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; -webkit-animation: weuiLoading 1s steps(12, end) infinite; animation: weuiLoading 1s steps(12, end) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; background-size: 100%; } .weui-loadmore { width: 65%; margin: 1.5em auto; line-height: 1.6em; font-size: 12px; text-align: center; } .weui-loadmore__tips { display: inline-block; vertical-align: middle; color: #888; }
福利專場(chǎng)商品列表初始化
#初始化數(shù)據(jù)接上篇 var sectionData = []; var ifLoadMore = null; var page = 1;//默認(rèn)第一頁(yè) data: { hidden:false, },
頁(yè)面初始化加載福利專場(chǎng)商品列表函數(shù)
#接上篇 /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { //加載福利專場(chǎng) that.newGoodsShow(); },
福利專場(chǎng)商品列表數(shù)據(jù)模型處理
newGoodsShow: function (success) { var that = this; ajax.request({ method: 'GET', url: 'goods/getHotGoodsList?key='+ utils.key+'&page=' + page+'&size=10', success: data => { var newGoodsData = data.result.list; page += 1; if (ifLoadMore) { //加載更多 if (newGoodsData.length > 0){ console.log(newGoodsData) //日期以及title長(zhǎng)度處理 for (var i in newGoodsData) { //商品名稱長(zhǎng)度處理 var name = newGoodsData[i].name; if (name.length > 26) { newGoodsData[i].name = name.substring(0, 23) + '...'; } } sectionData['newGoods'] = sectionData['newGoods'].concat(newGoodsData); }else{ ifLoadMore = false; this.setData({ hidden:true }) wx.showToast({ title: '暫無(wú)更多內(nèi)容!', icon: 'loading', duration: 2000 }) } }else{ if (ifLoadMore == null){ ifLoadMore = true; //日期以及title長(zhǎng)度處理 for (var i in newGoodsData) { //商品名稱長(zhǎng)度處理 var name = newGoodsData[i].name; if (name.length > 26) { newGoodsData[i].name = name.substring(0, 23) + '...'; } } sectionData['newGoods'] = newGoodsData;//刷新 } } that.setData({ newGoods: sectionData['newGoods'], // isHideLoadMore: true }); wx.stopPullDownRefresh();//結(jié)束動(dòng)畫(huà) } }) },
福利專場(chǎng)商品列表上拉觸底事件
/** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { console.log("上拉"); var that = this; console.log('加載更多'); if (ifLoadMore != null){ that.newGoodsShow(); } },
商品點(diǎn)擊查看詳情事件采集
catchTapCategory: function (e) { var that = this; var goodsId = e.currentTarget.dataset.goodsid; console.log('goodsId:' + goodsId); //新增商品用戶點(diǎn)擊數(shù)量 that.goodsClickShow(goodsId); //跳轉(zhuǎn)商品詳情 // wx.navigateTo({ url: '../detail/detail?goodsId=' + goodsId }) }, goodsClickShow(goodsId) { console.log('增加商品用戶點(diǎn)擊數(shù)量'); var that = this; ajax.request({ method: 'GET', url: 'goods/addGoodsClickRate?key=' + utils.key + '&goodsId=' + goodsId, success: data => { console.log("用戶點(diǎn)擊統(tǒng)計(jì)返回結(jié)果:" + data.message) } }) },
以上是“微信小程序商城開(kāi)發(fā)之商城首頁(yè)福利場(chǎng)不限下拉刷新動(dòng)態(tài)API數(shù)據(jù)怎么做”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。