最近在做一個導航的時候，發現使用overflow-x: auto來做多內容滑動導航效果很不好，思索是不是可以使用swiper來做一個，研究了下其實發現原理基本相同

這裏說下，要用swiper做導航菜單，有幾個要特別註意的參數

1：autoplay，官方說明【是否自動切換】，這個不填，菜單可不能自己動

2：indicator-dots ，官方說明【是否顯示面板指示點】，這個也不填，

3：display-multiple-items，官方說明【同時顯示的滑塊數量】，敲重點，這個參數必須設為1，要與previous-margin 和next-margin參數來控制焦點高亮圖居中

4，previous-margin 和next-margin，官方說明【前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值】【後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值】

5，current，官方說明【當前所在滑塊的 index】，主要控制哪一個被選中，比如默認加載第二項或點擊某一個讓其選中

<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:‘...‘ })
  }
})

特別說明下，點擊選擇時，可以直接取自定義的shopid來作為參數傳入查詢內容方法，

但是在滑動方法時卻沒辦法取自定義的shopid，只能取當前滑塊下標，

所以我在coffeeClassificationChange()方法中，用滑塊下標來作為導航菜單列表組數的下標條件來取shopid，

var shopId= that.data.menuTwoCon[multipleNumrppg].id

這算是swiper模塊的一個小坑吧

微信小程序 使用swiper制作一個滑動導航