L'API dynamique développée par WeChat Mini Program Mall réalise le code de mise en page en streaming des produits de vente spéciaux

Le contenu de cet article concerne l'API dynamique développée par le mini programme Mall de WeChat pour réaliser le code de mise en page en streaming des produits de vente spéciaux. J'espère que cela sera utile. à vous.

Voir l'effet

Plan de développement

1.
2. Appelez l'API dynamique pour obtenir les données et chargez-la
3 Cliquez sur le produit pour accéder aux détails du produit

Obtenir le modèle de données de l'API des détails du produit en fonction de l'ID du produit

Visitez : https:// 100boot.cn/ Sélectionnez le cas du micro-centre commercial, comme indiqué dans la figure ci-dessous :

Il existe également un modèle de données détaillé ci-dessous que vous pouvez consulter !

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.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 <= 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: &#39;GET&#39;,      
        url: &#39;goods/getActivityGoodsList?key=&#39; + utils.key + &#39;&activityId=&#39; + activityId+&#39;&page=&#39; + page + &#39;&size=10&#39;,      
        success: data => {        
        var newGoodsData = data.result.list;
        page += 1;        
        if (ifLoadMore) {          //加载更多
          if (newGoodsData.length > 0) {            
            console.log(newGoodsData)
            sectionData[&#39;brandGoods&#39;] = newGoodsData;
          } else {
            ifLoadMore = false;            
            this.setData({              
                hidden: true
            })
            
            wx.showToast({              
                title: &#39;暂无更多内容！&#39;,              
                icon: &#39;loading&#39;,              
                duration: 2000
            })
          }

        } else {          
            if (ifLoadMore == null) {
            ifLoadMore = true;
            sectionData[&#39;brandGoods&#39;] = newGoodsData;//刷新
          }
        }
        that.setData({          
            brandGoods: sectionData[&#39;brandGoods&#39;],          
            loadingCount: sectionData[&#39;brandGoods&#39;].length,
        });        
            console.log(that.data.brandGoods)
        wx.stopPullDownRefresh();//结束动画
      }
    })
  },  
catchTapCategory: function (e) {    
     var that = this;    
     var goodsId = e.currentTarget.dataset.goodsid;    
     console.log(&#39;goodsId:&#39; + goodsId);    //新增商品用户点击数量
    that.goodsClickShow(goodsId);    //跳转商品详情
    wx.navigateTo({ url: &#39;../detail/detail?goodsId=&#39; + goodsId    })
  },
  goodsClickShow(goodsId) {    
     console.log(&#39;增加商品用户点击数量&#39;);    var that = this;
    ajax.request({      
     method: &#39;GET&#39;,      
     url: &#39;goods/addGoodsClickRate?key=&#39; + utils.key + &#39;&goodsId=&#39; + goodsId,      
     success: data => {        
     console.log("用户点击统计返回结果：" + data.message)
      }
    })
  },
})

Recommandations associées :

WeChat Mini Program Mall Development Mall Development API dynamique Implémentation du code de la page de détails du produit (Partie 2)

WeChat Mini Program Mall Development Mall Codes de mise en œuvre pour le carrousel de la page d'accueil, la navigation par catégorie de produits et les ventes de nouveaux produits

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!