微信小程序 使用swiper制作一个滑动导航

<view class="container" >
  <view class="swiper-content"> 
   
    <swiper class=‘coffeeClassification-box‘  autoplay=‘‘ display-multiple-items=‘{{multipleNums}}‘  previous-margin="240rpx" next-margin="240rpx" current="{{multipleNumIndex}}" bindchange="coffeeClassificationChangeScroll" bindtransition="eventHandles">
         
          <swiper-item class="nav-boxs {{multipleNumIndex == index ? ‘on‘ : ‘‘}}"   wx:for="{{menuTwoCon}}"  wx:key="{{index}}"  bindtap="coffeeClassificationChange"  data-id="{{item.id}}" data-index="{{index}}">
            <view class=‘item-box‘>
              <image  class="slide-image {{multipleNumIndex == index ? ‘active‘ : ‘‘}}"  src="{{item.image}}"/>
              <text>{{item.product_name}}</text>
            </view>
            
          </swiper-item>
        
    </swiper>
  </view>
</view>

.item-box{
  width: 100%;
  height: 200rpx;
 
}
.item-box image{
  width: 100%;
  height: 200rpx;
}
.coffeeClassification-box .nav-boxs{
  text-align: center;
   padding-top: 20rpx;
}
.coffeeClassification-box .nav-boxs.on{
  
   padding-top: 0rpx;
}
.coffeeClassification-box .nav-boxs .slide-image{
  width: 100rpx;
  height: 80rpx;
  border: 1px solid #666;
  margin: 0 auto;
}
.coffeeClassification-box .nav-boxs .slide-image.active{
  width: 180rpx;
  height: 120rpx;
  border: 1px solid #ff0000;
}
.item-box text{
  display: block;
  font-size: 24rpx;
  
}

// pages/memberDetails/memberDetails.js
const apps = require(‘../../app.js‘)
var app = getApp();
// const swiper = require(‘./../../utils/swiper/swiper.min.js‘)
Page({

  /**
   * 页面的初始数据
   */
  data: {
    menuTwoCon:[],
    multipleNumIndex:0, //默认显示的位置
    multipleNums:1, //默认显示数量
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var data = {}
    var url = getApp().globalData.url; //接口路径
    // console.log("data-------/---", that.data.currentTab);
    // var tid = e.currentTarget.dataset.tid;
    var category_id = that.data.currentTabTid;
    var currentTab = that.data.currentTab;
    data.category_id ="29"

    wx.request({ //请求二级分类菜单列表
      method: "get",
      url: url + ‘/Api/lists/module/product/key/dac509bd90a82719a3569291e12c24a6f1af4bac‘,
      data: data,
      header: {
        ‘content-type‘: ‘application/json‘
      },
      dataType: "json",
      success: function (res) {



        var dataSource = [], data = [];

        res.data.result && res.data.result.map(item => {
          dataSource.push(item)
        })




       
          data = dataSource
        




        var multipleNumrppg = that.data.multipleNumrppg;
        that.setData({

          // currentTab: menuTwo[0].id, //默认二级分类选中菜单赋值
          menuTwoCon: data,//默认二级分类内容
          multipleNumIndex: multipleNumrppg
        });

      }, fail: function (res) {
        // console.log("请求主分类菜单列表3", res)
      }
    })
    const img = "";
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  coffeeClassificationChangeScroll:function(e){
    var that = this
    console.log("1111", e.detail.current);
    var multipleNumrppg = e.detail.current;
    var shopId= that.data.menuTwoCon[multipleNumrppg].id
    that.setData({
      multipleNumIndex: multipleNumrppg
    });
    that.getShopList(shopId)
  },
   coffeeClassificationChange:function(e){
    var that = this;
    var clickId = e.currentTarget.dataset.index;
    var shopId = e.currentTarget.dataset.shopid;
    this.setData({
      multipleNumIndex: clickId
    })
    that.getShopList(shopId)
  },
    getShopList: function(shopId){ 
      console.log("shopId----->",shopId );
      wx.request({data:shopId,url:‘...‘ })
  }
})