uni-app实现scroll-view导航栏点击的选项居中

实现横向导航栏点击选择的选项居中

 <view class="main">
		 <scroll-view scroll-x="true" class="nav"  scroll-with-animation :scroll-left="scrollLeft">
		      <view v-for="(item, index) in itemType" :key="index" class="nav-item" @click="switchNav(index,item.typeId)">
		          <text class="item-text" :class="currentIndex == index? 'active' : ''">{{item.text}}</text>
		      </view>
		  </scroll-view>
</view>

<script>
	export default {
		
		
		data() {
			return {
				itemType:[
					{typeId:"",text:"全部"},
					{typeId:"01",text:"已派工"},
					{typeId:"04",text:"待接单"},
					{typeId:"05",text:"已开始"},
					{typeId:"02",text:"已完成"},
					{typeId:"03",text:"已取消"},
					{typeId:"99",text:"其他"}],//类型集合
				contentScrollW: 0, // 导航区宽度
				currentTab: "", // 当前选中的值
				currentIndex: 0, // 当前选中的下标
				scrollLeft: 0, // 横向滚动条位置
				
				
			}
		},
		mounted() {
		    // 获取标题区域宽度，和每个子元素节点的宽度
		    this.getScrollW()
		},
		methods: {
		    // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
		    getScrollW() {
		        const query = uni.createSelectorQuery().in(this);
		
		        query.select('.nav').boundingClientRect(data => {
		            // 拿到 scroll-view 组件宽度
		            this.contentScrollW = data.width
		        }).exec();
		
		        query.selectAll('.nav-item').boundingClientRect(data => {
		            let dataLen = data.length;
		            for (let i = 0; i < dataLen; i++) {
		                //  scroll-view 子元素组件距离左边栏的距离
		                this.itemType[i].left = data[i].left;
		                //  scroll-view 子元素组件宽度
		                this.itemType[i].width = data[i].width
		            }
		        }).exec()
		    },
			
			switchNav(index,typeId) {//点击了选项
			    if (this.currentTab == typeId) {
					return;
			    } else{
					this.currentTab = typeId
					this.currentIndex = index

				// 效果一(当前点击子元素靠左展示)  局限性：子元素宽度要相同
                /*this.scrollLeft = index  * this.itemType[index].width */

                // 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
                /* this.scrollLeft = 0;
                for (let i = 0; i < index; i++) {
                    this.scrollLeft += this.itemType[i].width
                }; */


                // 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度要相同
                /* this.scrollLeft = (index - 1)  * this.itemType[index].width */

                // 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
                /* this.scrollLeft = 0;
                for (let i = 0; i < index - 1; i++) {
                    this.scrollLeft += this.itemType[i].width
                }; */
					//效果三 当前点击子元素居中展示，不受子元素宽度影响
					this.scrollLeft = this.itemType[index].left - this.contentScrollW / 2 + this.itemType[index].width / 2;
					
				}
				
			},
			
			
		},
		onLoad(options) {
			
			
		},
		onShow() {

		},


	}
</script>

<style>
.main .nav {
	  background: #92a0a5;
	  height: 100rpx;
	  width: 100%;
	  line-height: 100rpx; 
	  white-space: nowrap;
	  font-size: 32rpx;
	  text-align: center;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 99;
	}

	.main .nav .nav-item{
	  display: inline-block;
	  /* width: 25%; */
	  padding: 0 50rpx;
	  text-align: center;
	  color: #dbdbdb;
	  font-size: 32rpx;
	}
	
	.main .nav .active{
	   color: white;
	  font-weight: bold;
	}
</style>

样品图