WeChat 미니 프로그램 몰 개발 코드를 쇼핑몰 홈페이지에 복지 분야로 구현하여 제한 풀다운 없이 동적 API 데이터를 새로 고칩니다.

이 글의 내용은 제한 풀다운 없이 동적 API 데이터를 새로 고치기 위해 WeChat 미니 프로그램 몰에서 개발한 쇼핑몰 홈페이지의 복지 분야 코드 구현에 대한 내용입니다. 필요한 친구들이 참고할 수 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.

효과 표시

말할 필요 없이 구현 효과만 보세요:

복지 특산품 무제한 드롭다운 표시.gif

전자상거래 홈페이지 리뷰

기능 모듈.jpg

위 사진과 같이 전자상거래 홈페이지에는 다섯 번째 모듈인 복지 특집만 남았습니다. 복지 특집은 무한한 새로 고침 방법을 사용하여 비즈니스 변화를 구현합니다.

복지 스페셜 데이터 모델

복지 스페셜 API.png

복지 스페셜 API 세부 사항은 https://100boot.cn에 접속하여 사례를 선택하면 볼 수 있습니다.

home.wxml

복지 특별 상품 목록 레이아웃

<!--福利专场 start-->
  <view class="welfare-container"> 
  <view class="category-title">
    <text class="title">福利专场</text>
    <view class="line_name">
      <text>每天早10晚8准时上新</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>   <!--福利专场 end-->

복지 특별 상품 목록 드롭다운으로 더 많은 레이아웃 로드

 <view class="weui-loadmore" hidden="{{hidden}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">努力加载中</view>
  </view>

home.wxss

복지 특별 상품 목록 CSS 스타일

/**=========福利专场============**/
.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;
}

복지 특별 상품 목록 드롭다운으로 로드 더 많은 스타일

/*  加载更多   */
.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;
}

home.js

福利专场商品列表初始化

#初始化数据接上篇
var sectionData = [];
var ifLoadMore = null;
var page = 1;//默认第一页
data: {
    hidden:false,
  },

页面初始化加载福利专场商品列表函数

#接上篇
/**
  * 生命周期函数--监听页面加载
  */
  onLoad: 
  function (options) {     
  //加载福利专场
    that.newGoodsShow();
  },

福利专场商品列表数据模型处理

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长度处理
            for (var i in newGoodsData) {
              //商品名称长度处理
              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: '暂无更多内容！',
                icon: 'loading',
                duration: 2000
              })
          }
          
        }else{
          if (ifLoadMore == null){
            ifLoadMore = true;
 
            //日期以及title长度处理
            for (var i in newGoodsData) {
              //商品名称长度处理
              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();//结束动画
      }
    })
  },

福利专场商品列表上拉触底事件

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("上拉");
    var that = this;
    console.log('加载更多');
    if (ifLoadMore != null){
      that.newGoodsShow();
 
    }
  },

商品点击查看详情事件采集

商品点击查看详情事件采集.png

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)
      }
    })
  },

相关推荐：

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

微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现

위 내용은 WeChat 미니 프로그램 몰 개발 코드를 쇼핑몰 홈페이지에 복지 분야로 구현하여 제한 풀다운 없이 동적 API 데이터를 새로 고칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!