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

r囧r小猫 2022-10-16 00:57 52阅读 0赞

先看下效果

![20210526110257979.png][]

![20210526110257981.png][]

效果一： 可直接使用 scroll-into-view 属性实现  或者 也可使用  scroll-left

思路：第一种， scroll-into-view 绑定一个动态 ID，子元素循环产出ID，点击时进行绑定(这次就不做代码产出了)

第二种， 计算每个子元素的宽度，点击时获取当前点击元素前面的元素宽度之和

效果二：使用  scroll-left

思路：计算每个子元素的宽度，点击时获取当前点击元素索引 - 1 的前面元素宽度之和，相比于效果一的第二种情况，这里少算当前点击元素前面的一个元素的宽度，实现留一

效果三：使用  scroll-left

思路：当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半  + 当前点击子元素一半的宽度 实现居中展示

<template>
    	<view class="center-cut-menu">
    		<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>

### 注： 支付宝小程序不支持in(component)，使用无效果 ###

[20210526110257979.png]: /images/20221014/d92493990db444e3a5ae0c097d029482.png
[20210526110257981.png]: /images/20221014/5ff1c08db4bf493fa5a3ed8065bc3cbb.png