assess-app/uni_modules/k-tabs-swiper/components/example/kTabs.vue

<template>
	<view class="components">
		<view>
			<view class="title">常规：</view>
			<k-tabs-swiper v-model="current" :tabs="tabs" bgColor="#1EBB81" color="rgba(255,255,255,0.8)"
				activeColor="#FFFFFF" fontSize="28rpx" :bold="true" :scroll="true" height="100rpx" lineHeight="10rpx"
				@change="changeTab" paddingItem="0 50rpx" />
		</view>
		<view>
			<view class="title">数据为-数组对象：</view>
			<k-tabs-swiper v-model="current" :tabs="tabs1" field="name" bgColor="#1EBB81" color="rgba(255,255,255,0.8)"
				activeColor="#FFFFFF" fontSize="28rpx" :bold="true" :scroll="true" height="100rpx" lineHeight="0"
				@change="changeTab" paddingItem="0 50rpx" />
		</view>
		<view>
			<view class="title">平铺：</view>
			<k-tabs-swiper v-model="current" :tabs="tabs2" bgColor="#1EBB81" color="rgba(255,255,255,0.8)"
				activeColor="#FFFFFF" fontSize="28rpx" :scroll="false" :bold="true" height="100rpx" @change="changeTab"
				paddingItem="0 50rpx" />
		</view>
		<view>
			<view class="title">胶囊：</view>
			<k-tabs-swiper v-model="current" :tabs="tabs" :pills="true" bgColor="#1EBB81" color="rgba(255,255,255,0.8)"
				activeColor="#FFFFFF" fontSize="28rpx" :bold="true" height="100rpx" @change="changeTab"
				paddingItem="0 50rpx" />
		</view>
		<view>
			<view class="title">胶囊：</view>
			<k-tabs-swiper v-model="current" :tabs="tabs" :pills="true" bgColor="#1EBB81" color="rgba(255,255,255,0.8)"
				activeColor="#FFFFFF" fontSize="28rpx" pillsColor="red" :bold="true" pillsBorderRadius="100rpx"
				height="100rpx" :lineScale="0.8" @change="changeTab" paddingItem="0 50rpx" />
		</view>
		<view>
			<view class="title">自定义底部：</view>
			<k-tabs-swiper v-model="current" :tabs="tabs" :pills="true" bgColor="#1EBB81" color="rgba(255,255,255,0.8)"
				activeColor="#FFFFFF" fontSize="28rpx" pillsColor="red" :bold="true" pillsBorderRadius="100rpx"
				height="100rpx" @change="changeTab" paddingItem="0 50rpx" :lineSlot="true">
				<image class="line_img" slot="line" src="/static/k-tabs-swiper/img.png" mode="scaleToFill" />
			</k-tabs-swiper>
		</view>
	</view>
</template>
<script>
	import KTabsSwiper from '../k-tabs-swiper/k-tabs-swiper'

	export default {
		components: {
			KTabsSwiper
		},
		data() {
			return {
				current: 0,
				tabs: ['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
				tabs1: [{
					id: 1,
					name: '新闻',
				}, {
					id: 2,
					name: '早报',
				}, {
					id: 1,
					name: '军事'
				}, {
					id: 3,
					name: '生活',

				}, {
					id: 4,
					name: '地区事件',
				}, {
					id: 5,
					name: '文化',
				}, {
					id: 6,
					name: '军事',
				}, {
					id: 7,
					name: '国内',
				}, {
					id: 8,
					name: '新闻',
				}], //用户测评日志
				tabs2: ['全部', '待支付', '进行中', '已完成'], //用户测评日志
			}
		},
		methods: {
			changeTab(index) {
				console.log("下标", index);
			}
		},
	}
</script>
<style lang="scss" scoped>
	.title {
		font-weight: bold;
		padding: 16rpx;
	}

	.line_img {
		width: 42rpx;
		height: 17rpx;
	}
</style>