小程序tab栏点击自动居中效果

image.png

点击自动居中显示

wxml

    
      
        
          
            {{ item.shipDate }}
          
          
            {{ item.status ===1 ?'已出货':'出货' }}
          
        
      
    

data:{
     toIndex: 0,
},
  handleChecked(e) {
    const onheadactive = e.currentTarget.offsetLeft // 元素距离左侧的位置
    const winweight = wx.getSystemInfoSync().windowWidth // 设备宽度
    const query = wx.createSelectorQuery()
    query.select('.item').boundingClientRect((rect: any) => {
      this.setData({
        toIndex: onheadactive - winweight / 2 + (rect.width / 2)
      })
    }).exec()
  },