2019-07-16 点击标题 居中显示

 <view wx:for="{{optList}}" wx:key='index' class="tab-item {{currentTab==index?'active':''}}"  data-current="{{index}}" bindtap="swichNav">{{item.optName}}</view>       
  </scroll-view>

  data: {  
  proportion: 0.5,//自适应比例 px / 750
    newwidth: 375,//屏幕宽度,
}
 onLoad: function(options) {
    //console.log(wx.getStorageSync('user_id'))
    //获取屏幕宽度高度

    wx.getSystemInfo({
      success: (res) => {
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)   
        let proportion = res.windowWidth / 750
        let newwidth = res.windowWidth - (proportion * 60); //左右两侧各减去 30rox
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
          proportion: proportion,
          newwidth: newwidth,//新的屏幕宽度(减去两边padding30rpx)
        })
      },
    })
},
// 点击标题切换当前页时改变样式
  swichNav: function(e) {
    let cur = e.target.dataset.current;
    //每个tab选项宽度占1/5
    console.log(this.data.newwidth)
    var singleNavWidth = this.data.newwidth / 5;
    //tab选项居中                            
    this.setData({
      scrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur,
        goodsResultList: [], //清除商品列表数据
        subclassificationindx: -1, //初始化子分类
      })
      let optid = this.data.optList[cur].optId
      leixing = optid
      if (cur == 0) {
        this.setData({
          ifindex: false
        })
        optid = 1 ///测试数据 一定要清除
        page = 2
      } else {
        wx.showLoading({
          title: '加载中',
        })
        this.setData({
          ifindex: true
        })
      }
      page = 1
      this.getoptList(leixing, order)
      this.getsmall_list(leixing)
    }
  },

.tab-h{
    height: 88rpx;width: 100%; box-sizing: border-box;overflow: hidden;background: #F7F7F7; font-size: 26rpx; white-space: nowrap;position: fixed;top: 200rpx; left: 0; z-index: 0; padding:0rpx 30rpx;}
.tab-item{padding:18rpx 0rpx;display: inline-block;width: 20%; text-align: center;}
.tab-item.active{color: #000; font-size:36rpx; position: relative; font-weight: bold;}
/* .tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;} */
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 300rpx;}
.scoll-h{height: 100%;}