本篇文章给大家带来的内容是关于微信小程序商城开发之动态api实现特卖商品的流式布局代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
看效果
开发计划1、新品特卖商品列表布局
2、调用动态api获取数据并加载
3、点击商品跳转商品详情
根据商品id获取商品详情api数据模型访问：https://100boot.cn/ 选择微商城案例，如下图所示：
下方还有详细的数据模型可以查看哦！
brand.wxml<scroll-view scroll-y="true" style="height:{{scrollh}}px" bindscrolltolower="brandshow"> <view class="goods" style="width:100%"> <view class="mg_item"> <view wx:for="{{col1}}" wx:key="id"> <view class="item_info" catchtap="catchtapcategory" data-goodsid="{{item.id}}"> <image src="{{item.imgurl}}" style="width:100%;height:{{item.height}}px"></image> </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> </view> <view class="mg_item"> <view wx:for="{{col2}}" wx:key="id" > <view class="item_info" catchtap="catchtapcategory" data-goodsid="{{item.id}}"> <image src="{{item.imgurl}}" style="width:100%;height:{{item.height}}px"></image> </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> </view> </view></scroll-view> <view style="display:none"> <image wx:for="{{brandgoods}}" wx:key="id" id="{{item.id}}" src="{{item.imgurl}}" bindload="onimageload1"></image></view> <view class="weui-loadmore" hidden="{{hidden}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">努力加载中</view> </view>
brand.wxsspage{ height: 100%; background-color: #f3f4f6;} /* 单个图片容器的样式 */.img_item { width: 48.5%; margin: 2px; display: inline-block; vertical-align: top; background-color: #ffffff; font-size: 24rpx;}.item_info{ border-top:5px solid #f3f4f6; }.product-name{ color: #000; /* height: 28px; */ text-align:left; margin: 0px 5px; margin-bottom: 5px; }.product-price-wrap .product-price-new{ color: #e80080; margin-left:5px; font-weight:900;}.product-price-wrap .product-price-old{ color: #888; text-decoration: line-through; padding-left: 2px;}.product-price-wrap .discount{ margin-left: 30px; background-color: #000; color: #fff;}/* 加载更多 */.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;}
brand.jsconst ajax = require('../../utils/ajax.js');const utils = require('../../utils/util.js');var sectiondata = [];var ifloadmore = null;var activityid = null;var page = 1;//默认第一页page({ data: { scrollh: 0, imgwidth: 0, loadingcount: 0, images: [], col1: [], col2: [] }, onload: function (options) { activityid = options.activityid; page = 1; console.log('activityid:' + activityid); wx.getsysteminfo({ success: (res) => { let ww = res.windowwidth; let wh = res.windowheight; let imgwidth = ww * 0.48; let scrollh = wh; this.setdata({ scrollh: scrollh, imgwidth: imgwidth }); //加载首组图片 // this.loadimages(); this.brandshow(); } }) }, onimageload1: function (e) { let imageid = e.currenttarget.id; let oimgw = e.detail.width; //图片原始宽度 let oimgh = e.detail.height; //图片原始高度 let imgwidth = this.data.imgwidth; //图片设置的宽度 let scale = imgwidth / oimgw; //比例计算 let imgheight = oimgh * scale; //自适应高度 let images = this.data.brandgoods; let imageobj = null; for (let i = 0; i < images.length; i++) { let img = images[i]; if (img.id+"" === imageid) { imageobj = img; break; } } imageobj.height = imgheight; let loadingcount = this.data.loadingcount - 1; let col1 = this.data.col1; let col2 = this.data.col2; //判断当前图片添加到左列还是右列 if (col1.length <= col2.length) { col1.push(imageobj); } else { col2.push(imageobj); } let data = { loadingcount: loadingcount, col1: col1, col2: col2 }; //当前这组图片已加载完毕，则清空图片临时加载区域的内容 if (!loadingcount) { data.images = []; } this.setdata(data); }, brandshow: function (success) { var that = this; console.log(page) ajax.request({ method: 'get', url: 'goods/getactivitygoodslist?key=' + utils.key + '&activityid=' + activityid+'&page=' + page + '&size=10', success: data => { var newgoodsdata = data.result.list; page += 1; if (ifloadmore) { //加载更多 if (newgoodsdata.length > 0) { console.log(newgoodsdata) sectiondata['brandgoods'] = newgoodsdata; } else { ifloadmore = false; this.setdata({ hidden: true }) wx.showtoast({ title: '暂无更多内容！', icon: 'loading', duration: 2000 }) } } else { if (ifloadmore == null) { ifloadmore = true; sectiondata['brandgoods'] = newgoodsdata;//刷新 } } that.setdata({ brandgoods: sectiondata['brandgoods'], loadingcount: sectiondata['brandgoods'].length, }); console.log(that.data.brandgoods) wx.stoppulldownrefresh();//结束动画 } }) }, catchtapcategory: function (e) { var that = this; var goodsid = e.currenttarget.dataset.goodsid; console.log('goodsid:' + goodsid); //新增商品用户点击数量 that.goodsclickshow(goodsid); //跳转商品详情 wx.navigateto({ url: '../detail/detail?goodsid=' + goodsid }) }, goodsclickshow(goodsid) { console.log('增加商品用户点击数量'); var that = this; ajax.request({ method: 'get', url: 'goods/addgoodsclickrate?key=' + utils.key + '&goodsid=' + goodsid, success: data => { console.log("用户点击统计返回结果：" + data.message) } }) },})
相关推荐：
微信小程序商城开发之动态api实现商品的详情页的代码（下）
微信小程序商城开发之商城首页轮播图、商品分类导航以及新品特卖的实现代码
以上就是微信小程序商城开发之动态api实现特卖商品的流式布局代码的详细内容。