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

小鱼儿 2023-10-12 15:13 13阅读 0赞

最近正在用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>