商城分类页面点击左侧分类,实现当前点击的分类滚动到屏幕视图中间位置,
首先获取屏幕的宽度,再获取点击元素的宽度,计算一下就可以获得应该滚动的距离,再更改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
})
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。