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

本篇文章给大家带来的内容是关于微信小程序商城开发之商城首页轮播图、商品分类导航以及新品特卖的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

上一篇我们设置了小程序后台服务器https域名设置、搭建了小程序基础的https框架和实现了首页导航模块，今天我们一起来看一下电商首页轮播、分类导航和新品特卖模块的实现。

<!--首页轮播 banner -->    <swiper>    <block>      <swiper-item>        <image></image>      </swiper-item>    </block>  </swiper>

data: {    navbars:null,//接上篇导航初始化数据    currentTab: 0,//接上篇导航初始化数据    banners:null,    indicatorDots: true, //是否显示面板指示点    autoplay: true, //是否自动切换    interval: 3000, //自动切换时间间隔,3s    duration: 1000, //  滑动动画时长1s  },

/**   * 生命周期函数--监听页面加载   */onLoad: function (options) {        var that = this;    //加载navbar导航条，接上篇导航数据    that.navbarShow();   //加载banner轮播    that.bannerShow();  },

bannerShow: function (success) {        var that = this;    ajax.request({              method: 'GET',              url: 'home/banners?key=' + utils.key,              success: data => {        that.setData({                      banners: data.result        })                console.log(data.result)      }    })  },

<!-- 分类导航 --> <view>  <view>    <block>      <view>        <image></image>        <text>{{item.menuName}}</text>      </view>    </block>  </view> </view>

data: {    navbars:null,//导航数据    currentTab: 0,    banners:null, //轮播数据    indicatorDots: true, //是否显示面板指示点    autoplay: true, //是否自动切换    interval: 3000, //自动切换时间间隔,3s    duration: 1000, //  滑动动画时长1s    menus: null, //分类导航数据},

/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {        var that = this;    //加载navbar导航条    that.navbarShow();    //加载banner轮播    that.bannerShow();    //加载menu分类导航菜单    that.menuShow();  },

menuShow: function (success) {        var that = this;    ajax.request({          method: 'GET',          url: 'home/menus?key='+ utils.key,          success: data => {        that.setData({                      menus: data.result        })                console.log(data.result)      }    })  },

data: {    navbars:null,//导航数据    currentTab: 0,    banners:null, //轮播数据    indicatorDots: true, //是否显示面板指示点    autoplay: true, //是否自动切换    interval: 3000, //自动切换时间间隔,3s    duration: 1000, //  滑动动画时长1s    menus: null, //分类导航数据    brands: null, //新品特卖数据},

/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {        var that = this;    //加载navbar导航条    that.navbarShow();    //加载banner轮播    that.bannerShow();    //加载menu分类导航菜单    that.menuShow();   //加载新品特卖    that.brandShow();  },

brandShow: function (success) {    var that = this;    ajax.request({              method: 'GET',              url: 'activity/brands?  key='+utils.key+'&type=temai&page=1&size=5',              success: data => {        that.setData({                      brands: data.result.list        })                    console.log("brands：" + data.result.list)      }    })  },