scroll-view 实现自定义模块的横向滑动（到屏幕的中间显示）

想要实现的功能是：一个横向的tab栏，点击item的时候，item自动滚动到屏幕的中间展示，有想过用vant的插件库来实现，但是那个不支持自定义内容，所以只好自己实现了。

效果图展示：

代码实现：
.wxml

<view class="container">
  <scroll-view id = "scroll-view" scroll-into-view="{{itemview}}" scroll-x class="scroll-x" scroll-left="{{scrollLeft}}"  scroll-with-animation="true" bindscroll="scrollMove">
  <view  wx:for="{{datalist}}" wx:key="index" class="view-parent">
    <view id="{{'item'+index}}"  bindtap="dianji" class="view-item{{selectItemIndex == index?'on':''}}" data-index="{{index}}">{{item.date}}</view>
  </view>
</scroll-view>

</view>

.wxss

/* pages/login/login.wxss */
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%h;
}

.scroll-x{
  height:80px;
  white-space:nowrap;
  display:flex;
}
/* 隐藏scrollbar */
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.view-parent{
  display:inline-block;
}
.view-item{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-color:#222222;
  background:#80CBC4;
  margin:10px;
}
.view-itemon{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-color:#222222;
  background:#80cb99;
  margin:10px;
}

.js

data: {
    scrollLeft: 0,
    selectItemIndex: 7,
    itemview: 'item7',
    value: '',
    datalist: [{
        date: "1",
        week: "日"
      },
      {
        date: "2",
        week: "六"
      },
      {
        date: "3",
        week: "五"
      },
      {
        date: "4",
        week: "四"
      },
      {
        date: "5",
        week: "一"
      },
      {
        date: "6",
        week: "二"
      },
      {
        date: "7",
        week: "三"
      },
      {
        date: "8",
        week: "三"
      },
      {
        date: "9",
        week: "三"
      },
      {
        date: "10",
        week: "三"
      },
      {
        date: "11",
        week: "三"
      },
      {
        date: "12",
        week: "三"
      },
      {
        date: "13",
        week: "三"
      },
      {
        date: "14",
        week: "三"
      },
      {
        date: "15",
        week: "三"
      },
    ],
  },
  dianji: function (event) {
    console.log(event)
    var itemid = event.target.id;
    var index = event.target.dataset.index;
    this.setData({
      selectItemIndex: index,
    })
    var ele = itemid
    this.getRect('#' + ele)
  },
  getRect: function (ele) {
    var that = this
    wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
      console.log(JSON.stringify(rect))
      //获取屏幕的宽度的一半
      var screen = wx.getSystemInfoSync().windowWidth/2;
      //获取点击item的左边坐标
      var left = rect.left;
      //获取item的宽度de 一半
      var subhalfwidth= rect.width/2
      //需要scrollview 移动的距离是
      var juli = left-screen
      var zuizhongjuli = juli+subhalfwidth
      that.setData({
        scrollLeft:that.data.scrollLeft+=zuizhongjuli
      })
    }).exec()
  },
  
  scrollMove(e) {
    console.log(e)
    var scrollLeft = e.detail.scrollLeft;
    this.data.scrollLeft = scrollLeft
  },

实现的思路就是点击item的时候记录item左边的坐标和item的宽度，这样就可以计算出item滑动到屏幕的中间需要多少距离，然后去调用scroll-view的滑动方法就可以了，代码的重点展示：

 wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
      console.log(JSON.stringify(rect))
      //获取屏幕的宽度的一半
      var screen = wx.getSystemInfoSync().windowWidth/2;
      //获取点击item的左边坐标
      var left = rect.left;
      //获取item的宽度de 一半
      var subhalfwidth= rect.width/2
      //需要scrollview 移动的距离是
      var juli = left-screen
      var zuizhongjuli = juli+subhalfwidth
      that.setData({
        scrollLeft:that.data.scrollLeft+=zuizhongjuli
      })
    }).exec()