商城分类页面点击左侧分类,实现当前点击的分类滚动到屏幕视图中间位置,
首先获取屏幕的宽度,再获取点击元素的宽度,计算一下就可以获得应该滚动的距离,再更改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
      })
    }
 }

doocaa
2 声望0 粉丝