scroll-view点击item使之滚动到屏幕中间

商城分类页面点击左侧分类,实现当前点击的分类滚动到屏幕视图中间位置,
首先获取屏幕的宽度,再获取点击元素的宽度,计算一下就可以获得应该滚动的距离,再更改scroll-top='scrollTop'即可

微信获取元素宽高的方法

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

}).exec()




     
      {{item.catName}}
     
   
 
 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
      })
    }
 }

你可能感兴趣的:(前端,vue.js,html5)