小程序 和 uni-app 实现tab点击自动居中屏幕显示

小程序 和 uni-app 实现tab点击自动居中显示 效果

• <scroll-view scroll-x class="scrollContent" :scroll-left='scorllLeft' scroll-with-animation>
  				<view class="sccontent">
  					<view class="tab-item" :id="'se-'+(index+1)" :class="{'active':index==activeIndex}" @click="activeItem($event,item,index)"  :style="{'marginLeft':index==0?'20rpx':''}" v-for="(item,index) in tabList" :key='index'>{{item.name}}</view>
  				</view>
  		</scroll-view>
  

给scroll 的内部元素添加唯一id属性 方便后续查找 :id="‘se-’+(index+1)"

给scroll-view 设置 :scroll-left=‘scorllLeft’ 属性

mounted生命周期的时候 计算出 scroll-view的宽度 createSelectorQuery() api 自行查找 文档

uni.createSelectorQuery()

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息

mounted() {
			//初始化求出滚动的宽度
			this.createSelectorQuery().select('.scrollContent').boundingClientRect((rect)=>{
			    this.scrollViewWidth = Math.round(rect.width)
			}).exec()
		},

滚动元素的点击事件

activeItem(e,item,index){
				//赋值选中下标
				this.activeIndex = index
				//自定义事件
				this.$emit('activetab',{
					item,
					index
				})
				//获取点击元素的宽度求出元素一半的宽度
				this.createSelectorQuery().select('#se-'+(index+1)).boundingClientRect((rect)=>{
					this.elWidth = rect.width/2
				}).exec()
				//获取点击元素距离屏幕左边的距离
				let offsetLeft = e.currentTarget.offsetLeft;
				// 当前元素 距离屏幕的左边距离 减去 scroll-view的一半 +加元素的一般的宽度 
				this.scorllLeft = offsetLeft - (this.scrollViewWidth/2) + this.elWidth
			}

最后记得给scroll-view设置滚动的动画属性

scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡