uniapp中如何使uni-segmented-control实现横向滑动

ZX5191

已于 2023-06-24 21:22:44 修改

阅读量2.5k

点赞数 3

文章标签： vue.js javascript 微信小程序

于 2023-06-24 21:20:35 首次发布

本文链接：https://blog.youkuaiyun.com/ZX5191/article/details/131196902

版权

作者在使用uniapp开发微信小程序时，遇到通过uni-segmented-control和swiper联动实现分类浏览的需求。当items选项增多导致页面布局拥挤时，尝试在外层添加scroll-view并调整uni-segmented-control宽度，但效果不佳。最终，作者通过修改uni-segmented-control源码来解决长列表的展示问题，增加了组件的宽度属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近正在用uniapp框架做微信小程序，遇到一个需求，分类浏览数据。于是，我打算用uni-segmented-control加swiper联动来实现，首先上代码：

<template>
	<view class="page-box">
		
			<uni-segmented-control style="margin-left: 15rpx;margin-right: 15rpx;margin-top:15rpx;" :current="tabIndex" :values="items" 
				@clickItem="onClickItem"  styleType="button" activeColor="#007aff"></uni-segmented-control>
		
		
		<swiper :current="tabIndex" style="margin: 15rpx;" class="content-box" :duration="300" @change="ontabchange">
			<swiper-item>
				<view>我是第一个内容页</view>
			</swiper-item>
			<swiper-item>
				<view>我是第二个内容页</view>
			</swiper-item>
			<swiper-item>
				<view>我是第三个内容页</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				WORKERID:'',
				baseurl:'',
				datalist:[],
				tabIndex:0,
				datalist2:[],
				//items:['装配补加','mpm补加','其他补加','其他补加1','其他补加2','其他补加3','其他补加4','其他补加5'],
				items:['装配补加','mpm补加','其他补加'],
				datalist3:[]
			}
		},
		onLoad() {
			this.baseurl=getApp().globalData.baseurl;
			this.WORKERID=uni.getStorageSync("WORKERID");
			
		},
		onShow() {
			this.shuaxin();
		},
		methods: {
			
			onClickItem(e){
				this.tabIndex = e.currentIndex;
			},
			ontabchange(e){
				this.tabIndex = e.target.current;
			},
			
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
	.page-box {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.head-box {
		flex-shrink: 0; //保持内容不缩放，适用于内容不确定大小时候
		// height:100rpx; //设置高度为100，如果内容确定为这么高的话
	}
	.flexbox {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.content-box {
		flex-grow: 1; //充满屏幕
		height: 100%; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
		overflow: auto;
	
	}	
	.footer-box {
		flex-shrink: 0; //保持内容不缩放，适用于内容不确定大小时候
		// height:100rpx; //设置高度为100，如果内容确定为这么高的话
	}
	.scroll-Y {
		flex-grow: 1; //充满屏幕
		height: 100vh; //如果中间不充满屏幕的话，自适应，底部会跟随在中间布局后面
		overflow: auto;
	}
	.line-h {
		height: 3rpx;
		background-color: #cccccc;
	}
</style>

但是当我的items中的选项多的时候，页面就会变得很难看，所有的元素都会挤在一起，于是我就想在uni-segmented-control的外面套个scroll-view，uni-segmented-control加个style=“width:1000rpx”,但是不好使，还是那个样子。没办法，我只好动uni-segmented-control的源码了，首先咱先看看uni-segmented-control的源码

<template>
	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
		:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
		<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
		index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
		index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
			index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
			:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
			class="segmented-control__item" @click="_onClick(index)">
			<view>
				<text :style="{color:
				    index === currentIndex
				      ? styleType === 'text'
				        ? activeColor
				        : '#fff'
				      : styleType === 'text'
				        ? '#000'
				        : activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
			</view>

		</view>
	</view>
</template>

<script>
	/**
	 * SegmentedControl 分段器
	 * @description 用作不同视图的显示
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
	 * @property {Number} current 当前选中的tab索引值，从0计数
	 * @property {String} styleType = [button|text] 分段器样式类型
	 * 	@value button 按钮类型
	 * 	@value text 文字类型
	 * @property {String} activeColor 选中的标签背景色与边框颜色
	 * @property {Array} values 选项数组
	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
	 */

	export default {
		name: 'UniSegmentedControl',
		emits: ['clickItem'],
		props: {
			current: {
				type: Number,
				default: 0
			},
			values: {
				type: Array,
				default () {
					return []
				}
			},
			activeColor: {
				type: String,
				default: '#2979FF'
			},
			styleType: {
				type: String,
				default: 'button'
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		watch: {
			current(val) {
				if (val !== this.currentIndex) {
					this.currentIndex = val
				}
			}
		},
		created() {
			this.currentIndex = this.current
		},
		methods: {
			_onClick(index) {
				if (this.currentIndex !== index) {
					this.currentIndex = index
					this.$emit('clickItem', {
						currentIndex: index
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.segmented-control {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		height: 36px;
		overflow: hidden;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		//width: 1200rpx; //如果选项卡数组多了的话,可以调节宽度外面加个scrollview
	}

	.segmented-control__item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		box-sizing: border-box;
		/* #endif */
		position: relative;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.segmented-control__item--button {
		border-style: solid;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-right-width: 1px;
		border-left-width: 0;
	}

	.segmented-control__item--button--first {
		border-left-width: 1px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.segmented-control__item--button--last {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.segmented-control__item--text {
		border-bottom-style: solid;
		border-bottom-width: 2px;
		padding: 6px 0;
	}

	.segmented-control__text {
		font-size: 14px;
		line-height: 20px;
		text-align: center;
	}
</style>

我的处理方法比较简陋，就是在原组件的样式里加个宽度，然后外面加个scrollview，时间不多，就先这么对付着。大佬们可以把宽度做成组件的属性。

<scroll-view scroll-x="true">
			<uni-segmented-control style="margin-left: 15rpx;margin-right: 15rpx;margin-top:15rpx;" :current="tabIndex" :values="items" 
				@clickItem="onClickItem"  styleType="button" activeColor="#007aff"></uni-segmented-control>
</scroll-view>