微信小程序|小程序开发
微信小程序,电商小程序
微信小程序-小程序开发
本篇文章给大家带来的内容是关于微信小程序商城开发之动态API实现特卖商品的流式布局代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
快车程序源码,Ubuntu中添加图片,重新初始化tomcat,日本爬虫市场,国内php网站上线,潍坊seo鼋行者seo04lzw
看效果
远程控制软件源码,ubuntu安装览器,tomcat突然就不能,线上爬虫项目,web后端开发php,宁河区电商seo技术市场报价lzw
android studio 源码下载,linux查看ubuntu,tomcat网页打开是乱码,eclipse网络爬虫,php闭包是什么,百度seo排名工具外推lzw
开发计划
1、新品特卖商品列表布局
2、调用动态API获取数据并加载
3、点击商品跳转商品详情
根据商品ID获取商品详情API数据模型
访问：/ 选择微商城案例，下图例：
下方还有详细的数据模型可以查看哦！
brand.wxml
{{item.name}}
￥{{item.price}}
￥{{item.privilegePrice}}
{{item.discount}}折
{{item.name}}
￥{{item.price}}
￥{{item.privilegePrice}}
{{item.discount}}折
努力加载中
brand.wxss
page{ 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.js
const 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 {var newGoodsData = data.result.list; page += 1;if (ifLoadMore) {//加载更多if (newGoodsData.length > 0) { console.log(newGoodsData) sectionData[randGoods] = newGoodsData;} else { ifLoadMore = false; this.setData({ hidden: true }) wx.showToast({ title: 暂无更多内容！, icon: loading, duration: 2000 })} } else { if (ifLoadMore == null) { ifLoadMore = true; sectionData[randGoods] = newGoodsData;//刷新} } that.setData({ brandGoods: sectionData[randGoods], loadingCount: sectionData[randGoods].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实现商品的详情页的代码（下）
微信小程序商城开发之商城首页轮播图、商品分类导航以及新品特卖的实现代码
