image.png

点击自动居中显示

wxml

    <scroll-view class="scroll-view-time" scroll-x="true" scroll-left='{{ toIndex }}' scroll-with-animation="true" bindscroll="scroll" style="width: 100%">
      <block wx:for='{{ dateData }}'>
        <view
          class="item {{ item.status === 2 ? 'item-valid':'' }} {{ index===active.index?'item-checked':'' }}"
          data-index='{{ index }}'
          data-shipDate='{{ item.shipDate }}'
          bind:tap='handleChecked'
        >
          <view class="item-date" hover-class="none" hover-stop-propagation="false">
            {{ item.shipDate }}
          </view>
          <view class="item-state" hover-class="none" hover-stop-propagation="false">
            {{ item.status ===1 ?'已出货':'出货' }}
          </view>
        </view>
      </block>
    </scroll-view>

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()
  },