scroll-view itemをクリックして画面の真ん中にスクロールさせます
ショッピングモールの分類ページは左側の分類をクリックして、現在クリックする分類を実現してスクリーンビューの中間位置までスクロールして、まずスクリーンの幅を取得して、更にクリック要素の幅を取得して、計算してすぐスクロールすべき距離を得ることができて、更にscroll-top='scrollTop's
微信取得要素の幅の高さの方法
wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
}).exec()
微信取得要素の幅の高さの方法
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
})
}
}