微信小程序商城开发之动态API实现特卖商品的流式布局代码

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; }

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 <= 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实现商品的详情页的代码（下）

微信小程序商城开发之商城首页轮播图、商品分类导航以及新品特卖的实现代码