agent-test/components/poiuy-xTab

插件安装

tab切换组件 将组件放在自己的组件库里导入即可

注意

请使用一个宽度为100%容器将组件包裹

开启自适应后 将只会在当前可见域滚动，关闭scroll-x,自动计算间距。（只有固定3-4项的情况下使用）

下划线模式下 下划线总在底部，不管给多少高度。给了下划线position属性后，会自动缩短下划线宽度并且居中于当前栏。

导入：

import xTab from '@/components/poiuy-xTab/xTab.vue';

---

属性 attribute

属性名	类型	介绍	默认值
value	Array	数据列表	[]
actValue	actValue	当前所在位置（选中）
setField	Object	设置对应字段	{id:'id',name:'name'}
adaptation	Boolean	是否自适应显示	false
actType	String	选中方式(triangle[三角形]/underline[下划线])	triangle
config	Object	配置对象 已经设置默认值	{}

---

config对象参数

属性名	类型	介绍	默认值
height	Number	组件的高度	80 (rpx)
padding	Number	组件的左右间距	30 (rpx)
size	Number	文字大小	34 (rpx)
color	String	文字颜色（直接传颜色）	#FEC1AB
actColor	String	选中时的颜色	#FFFFFF
spacing	Number	每一项跟右边的间距	44 (rpx)
position	Number	选中标识的位置	0
actWeight	String	选中时文字的字重	100

---

方法 method

方法名	介绍
changeTab	选择之后的返回结果,会返回当前[id/name/index]

---

####示范代码

<template>
<view class="tab-view">
<xTab adaptation :value="tabList" @changeTab="changeTab" actType="underline" :config="{color:'#666666',actColor:'#FE4603',size:32,actWeight:'Bold',position:0}"></xTab>
</view>
</template>
<script>
	import xTab from '@/components/poiuy-xTab/xTab.vue';
	export default {
		components: {
			xTab
		},
		data() {
			return {
				tabList:[{
					id:1,
					name:'测试列表(7)'
				},{
					id:2,
					name:'测试介绍'
				},{
					id:3,
					name:'测试评论(100)'
				}]
			}
		},
		methods: {
			changeTab(e){
				console.log(e);
			}
}
</script>
<style>
.tab-view{
	width:100%
}
</style>

---

###[彩蛋提示]

配合swiper 使用 [代码可复制使用]

<template>
		<view class="tab-view">
			<xTab adaptation :value="tabList" :actValue="swiperCurrIndex" @changeTab="changeTab" actType="underline" :config="{color:'#666666',actColor:'#FE4603',size:32,actWeight:'Bold',position:0}"></xTab>
			<view>
				<swiper :current="swiperCurrIndex" @change="swiperChange" :style="{height:swiperHegiht}">
					<swiper-item v-for="(item,index) of tabList" :key="index">
					<view :id="'swiper_id_'+index">
					{{item.name}}
					</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
</template>
<script>
	import xTab from '@/components/poiuy-xTab/xTab.vue';
	export default {
		components: {
			xTab
		},
		data() {
			return {
				tabList:[{
					id:1,
					name:'测试列表(7)'
				},{
					id:2,
					name:'测试介绍'
				},{
					id:3,
					name:'测试评论(100)'
				}],
				swiperCurrIndex:0,//swiper当前位置
				swiperHegiht:300, //swiper动态高度
			}
		},
		onLoad:function(){
			this.setSwiperHeight();
		},
		methods: {
			//xTab 组件的切换返回方法
			changeTab(e){
				console.log(e);
				this.swiperCurrIndex = e.index;
				this.setSwiperHeight();
			},

			//swiper组件的切换返回值
			swiperChange(e) {
				this.swiperCurrIndex = e.detail.current;
				this.setSwiperHeight();
			},
			//动态设置swiper高度
			setSwiperHeight() {
				const that = this;
				let obj = uni.createSelectorQuery().in(this).select("#swiper_id_" + (this.swiperCurrIndex));
				obj.boundingClientRect(function(data) { //data - 各种参数
					if (data) {
						//得到px单位的高度，通过px转换rpx的单位换算(加上底部的间距或者存在底部按钮高度合成最后的rpx高度)
						that.swiperHegiht = data.height * 2 + 110; 
					}
				}).exec();
			},
}
}
</script>
<style>
.tab-view{
	width:100%
}
	swiper {
			min-height: 80vh;
		}
</style>