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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144