当选项大于屏幕宽度,在选中选项时希望选中项聚焦到屏幕可视范围:(横向滚动)
scroll-view 属性
在代码中需要给每一个选项tab 绑定一个ID 例::id="'tab-'+index" index为循环索引
第一种方法:
:scroll-into-view="scrollInto"
scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
选项卡点击操作赋值 this.scrollInto = 'tab-'+ index index表示选中选项卡的索引
实现效果: 选中选项卡会滚动到元素左边第一位
第二种方法:
:scroll-left="scrollLeft"
setScrollLeft: async function(tabIndex) {
let leftWidthSum = 0
for (var i = 0; i <= tabIndex; i++) {
let nowElement = await this.getWidth('tab-' + i)
console.log(nowElement)
leftWidthSum = leftWidthSum + nowElement.width
}
console.log(leftWidthSum)
let winWidth = uni.getSystemInfoSync().windowWidth
console.log(winWidth)
this.scrollLeft = leftWidthSum > winWidth/2 ? (leftWidthSum - winWidth/2) : 0
console.log(this.scrollLeft)
},
getWidth: function(id) { //得到元素的宽高
return new Promise((res, rej) => {
uni.createSelectorQuery().select("#" + id).fields({
size: true,
scrollOffset: true
}, (data) => {
res(data)
}).exec()
})
}
通过以上两个函数计算得到scrollLeft值
实现效果:选中项显示在屏幕中间