小程序点击tab导航栏滑动居中

图片

wxml：

<scroll-view class="scroll-view_H"
   scroll-left="{{scroll_left}}"
   scroll-with-animation="true"
   scroll-x="true">
    <view class="scroll-view-item_H">
      <view wx:for="{{topArray}}"
      bindtap="clickTitle"
      data-type = "{{item.type}}"
       class="{{type === item.type ?'active':''}}"
        wx:key="index">{{item.title}}</view>
    </view>
  </scroll-view>

js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    topArray: [
      { title: '家具', type: 2 },
      { title: '生鲜冻品', type: 13 },
      { title: '美妆护肤', type: 11 },
      { title: '数码电器', type: 12 },
      { title: '食品粮油', type: 14 },
      { title: '母婴用品', type: 15 },
    ],
    type: null, // 默认是类型2
    scroll_left: 0, // 设置滚动条距离左边的位置。
  },
  // 点击头部title的处理事件
  clickTitle(e) {
    var that = this;
    var index = e.currentTarget.dataset.index
    var type = e.currentTarget.dataset.type
    that.setData({
      type: type
    })
    that.getMarkerList(type)
  },
   /**
    * 页面传来的type。
    */
  getMarkerList(page_tab_type) {
    var that = this
    var type = page_tab_type
    that.Scroll_locatation(type)
  },

  Scroll_locatation(type) {
    var that = this
    var item_index = that.whitch_tab_item(type)
    var scroll = 100 * item_index-100
    that.setData({
      type: type,
      scroll_left: scroll
    })
 
  },
  // 判断是那个tab_item
  whitch_tab_item(type) {
    var that = this
    var tab_list = that.data.topArray
    var item_index = null
    tab_list.forEach((item, index) => {
      if (item.type === type) {
        item_index = index
      }
    })
    return item_index
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var tab_list = that.data.topArray
    var id_index = null
    tab_list.forEach((item,index) =>{
      if(item.title == "数码电器"){
        id_index = item.type
      }
    })
    console.log(id_index,"------")

    this.getMarkerList(id_index)
  },
})

css

.scroll-view_H{
  white-space: nowrap;
  margin-bottom:16rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width:70%;
}
.scroll-view-item_H>view{
  display: inline-block;
  width: 100px;
  text-align: center;
  height:67rpx;
  line-height: 67rpx;
}
.scroll-view-item_H>view.active{
  background: #FF6551;
  border-radius: 50px;
  color:#FFF;
}