关于前端:scrollview点击item使之滚动到屏幕中间

商城分类页面点击左侧分类，实现以后点击的分类滚动到屏幕视图两头地位,
首先获取屏幕的宽度，再获取点击元素的宽度，计算一下就能够取得应该滚动的间隔，再更改 scroll-top=’scrollTop’ 即可

微信获取元素宽高的办法

wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {

}).exec()

<scroll-view class="classify-left" scroll-y="true" :scroll-top="scrollTop" @scroll="scrollMove">

<view class="model-left">
     <block v-for="(item, index) in mainArray" :key="index">
      <view :class="select == item.catId ?'mix-model-hover':'mix-model'":data-catid="item.catId":id="'s'+ index" @tap="showAssify">{{item.catName}}</view>
     </block>
   </view>
 </scroll-view>
 data(){
    return{
      scrollTop: 0,
      moveParams: {scrollTop: 0}
    }
 },
 methods:{showAssify(e) {this.getRect('#s' + id);
    },

    getRect(ele) {
      var that = this;
      // 节点查问
      wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {console.log(rect);
        let moveParams = that.moveParams;
        moveParams.subTop = rect.top;
        moveParams.subHalfHeight = rect.height / 2;
        moveParams.screenHalfHeight = wx.getSystemInfoSync().windowHeight / 2;
        that.moveTo();}).exec()},
    moveTo: function () {
      let subTop = this.moveParams.subTop;
      let screenHalfHeight = this.moveParams.screenHalfHeight;
      let subHalfHeight = this.moveParams.subHalfHeight;
      let scrollTop = this.moveParams.scrollTop;
  
      let distance = subTop - screenHalfHeight + subHalfHeight;
  
      scrollTop = scrollTop + distance;
  
      this.setData({scrollTop})
    },
    scrollMove(e) {
      let moveParams = this.moveParams;
      moveParams.scrollTop = e.detail.scrollTop;
      this.setData({moveParams})
    }
 }