uniapp scroll-view 选项卡 滑动切换

当选项大于屏幕宽度，在选中选项时希望选中项聚焦到屏幕可视范围：（横向滚动）

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值

实现效果：选中项显示在屏幕中间

 

参考文章链接：uni-app 利用 scroll-view 和 swiper 制作 顶部导航条 （可复用）