很多時候我們都會遇到這種需求，在移動端端顯示導航欄橫向內滾動，可以左右滑動，同時將選中的目標元素居中顯示。那我們該如何去實現呢，不管是APP，移動端段網頁還是小程序，其原理都是相同的，接下來我就拿小程序舉個例子，先畫個圖解釋下：

具體步驟：

1.獲取當前設備的寬度

 onShow: function () {
    // 獲取當前設備的寬度
    this.setData({
      deviceWidth: wx.getSystemInfoSync().windowWidth
    })
  },

2.獲取當前元素的寬度以及距離父元素左邊的距離offsetleft

  onMove:function
 
(e){
    // 創建節點
    var query = wx.createSelectorQuery();
    //選擇id
    var that = this;
    var width = 0
    // 獲取當前點擊元素的寬度
    query.select(‘#item_‘ + e.currentTarget.dataset.index).boundingClientRect(function (rect) {
      width = rect.width;
      // 激活當前選中項
      that.data.tabmenu.forEach(function (element, index) {
        element.active 
 
= false
        if (e.currentTarget.dataset.index == index) {
          element.active = true
        }
      })
      that.setData({
        tabmenu: that.data.tabmenu,
        // 設置選中元素居中顯示
        scrollLeft: e.currentTarget.offsetLeft + (width / 2 - that.data.deviceWidth / 2)
      })
    }).exec();
    
  },
 

3.設置選中元素居中

JS：

scrollLeft: e.currentTarget.offsetLeft + (width / 2 - that.data.deviceWidth / 2)

wxml：

<!-- 標題欄 -->
      <scroll-view class="scroll-view_H" id="scroll-view_H" bindscroll="onScroll" scroll-left="{{scrollLeft}}" scroll-with-animation scroll-x="true">
        <block wx:for="{{tabmenu}}" wx:key="{{index}}">
          <view class="scroll-view-item_H {{item.active?‘active‘:‘‘}} " id="item_{{index}}" data-index="{{index}}" bindtap=‘onMove‘>{{item.name}}</view>
        </block>
      </scroll-view>

data數據

    tabmenu:[{
      name: ‘Html‘,
      active: true
    }, {
      name: ‘CSS‘,
      active: false
    }, {
      name: ‘Javascript‘,
      active: false
    }, {
      name: ‘Es6‘,
      active: false
    }, {
      name: ‘Vue‘,
      active: false
    }]

效果圖如下：

橫向滾動菜單-選中標題居中顯示