uni-app实现组件菜单左右滑动并点击切换（选中居中显示）demo效果（整理）

<template>
	<view class="center-cut-m`e`nu">
		<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
			<view class="scroll-item" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
				<text class="item-text" :class="curIndex == index? 'active' : ''">{
   
   {item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>
 
<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				list: [{
      
      
						id: 1,
						name: '星期一'
					},
					{
      
      
						id: 2,
						name: '星期二'
					},
					{
      
      
						id: 3,
						name: '星期三'
					},
					{
      
      
						id: 4,
						name: '星期四'
					},
					{
      
      
						id: 5,
						name: '星期五'
					},
					{
      
      
						id: 6,
						name: '星期六'
					},
					{
      
      
						id: 7,
						name: '星期七'
					},
					{
      
      
						id: 8,
						name: '星期八'
					},
					{
      
      
						id: 9,
						name: '星期九'
					},
					{
      
      
						id: 10,
						name: '星期十'
					}
				],
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				scrollLeft: 0, // 横向滚动条位置
			}
		},
		mounted() {
      
      
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
      
      
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
      
      
				let query = uni.createSelectorQuery().in(this);
				query.select('.scroll-view').boundingClientRect(data => {
      
      
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
 
				query.selectAll('.scroll-item').boundingClientRect(data => {
      
      
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
      
      
						//  scroll-view 子元素组件距离左边栏的距离
						this.list[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.list[i].width = data[i].width
					}
				}).exec()
			},
 
			// 选择标题
			changeMenu(index) {
      
      
				this.curIndex = index;
 
				// 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
				// this.scrollLeft = index * this.list[index].width
 
				// 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
				// this.scrollLeft = 0;
				// for (let i = 0; i < index; i++) {
      
      
				//     this.scrollLeft += this.list[i].width
				// };
 
 
				// 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
				// this.scrollLeft = (index - 1)  * this.list[index].width
 
				// 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
				// this.scrollLeft = 0;
				// for (let i = 0; i < index - 1; i++) {
      
      
				// 	this.scrollLeft += this.list[i].width
				// };
 
 
				// 效果三(当前点击子元素居中展示)  不受子元素宽度影响
				this.scrollLeft = this.list[index].left - this.contentScrollW / 2 + this.list[index].width / 2;
 
			}
		}
	}
</script>
 
<style lang="scss">
	.center-cut-menu {
      
      
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
 
		.scroll-view {
      
      
			height: 100rpx;
			white-space: nowrap;
 
			.scroll-item {
      
      
				height: 100rpx;
				padding: 0 20rpx;
				display: inline-block;
				text-align: center;
 
				.item-text {
      
      
					font-size: 30rpx;
					line-height: 100rpx;
 
					&.active {
      
      
						color: #1468FF;
					}
				}
			}
		}
	}
</style>