微信小程序微商城(三):电商首页福利专场无限下拉刷新动态API数据实现

懂点代码的大叔 2018-06-01 11:58:52 ⋅ 170 阅读

上一篇:微信小程序微商城(二):电商首页轮播、分类导航和新品特卖实现

友情提示:由于微信小程序微商城系列都是通过https调用API服务动态获取的数据模型,建议先看微信小程序微商城(一):https框架搭建并实现导航功能

效果展示

话不多说,直接看实现效果:



电商首页回顾


如上图所示,电商首页只剩下第五个模块-福利专场,福利专场是商品列表集合 我们将采用无限下来刷新的方式来实现改业务。

福利专场数据模型


福利专场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();    }  },

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


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

备注:本文是为了更好的让大家能够有模块化的思维来实现改电商案例,后续依然会采用这种方式,因为更贴近与实际工作场景,也让自己的编码更加的规范增加可阅读性。

微信小程序微商城系列

微信小程序微商城:开发者key获取

微信小程序微商城(一):https框架搭建并实现导航功能
微信小程序微商城(二):电商首页轮播、分类导航和新品特卖实现

关注我们

如果需要源码可以关注“IT实战联盟”公众号并留言(微商城源码,5个字会收到源码下载地址),也可以加入交流群和作者互撩哦~~~




全部评论: 0

    我有话说:

    程序实战-

    上一篇:程序实战-(上)好了,上一期我们把搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实战-(上)

    上一篇:程序实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看长什么样吧!   效果图

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序商城(五):动态API实现商品详情

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    程序抖音实战-

    抖音程序动态数据获取

    程序商城(四):动态API实现商品详情(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序商城(二):轮播、分类导航和新品特卖实现

    本案例所有模块都为https动态调用API数据服务获得

    程序实战-商品详情(上)

    先看一今天要实现程序商品详情吧!

    程序商城(六):动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据并加载和点击商品跳转商品详情

    程序实战-购物车(

    我们继续接着昨天的购物车写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序实战-商品详情加入购物车(

    今天会接着上一篇开始写商品详情加入购物车的部分,直接看效果......

    程序实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为程序做一准备前期准备工作~~

    程序实战-商品列表流式布局

    今天给大家分享一下程序商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序抖音实战-(上)

    你也可以用程序编写一个抖音

    程序实现商品数量加减

    这是一个用程序原生代码实现数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序实战-购物车(上)

    好久没更新程序实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序教程推出.......

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(九):授权并实现个人中心页面页面

    实现商城授权并获取用户信息和个人中心页面布局

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!