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

uni-app 小程序和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  在设置滚动条位置时使用动画过渡