JM-MiniApp/uni_modules/cc-newsTabs

cc-newsTabs

使用方法

<!-- tabArr：tab数组 tabChange：标签栏切换 -->
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
	
//初始化数据
tabArr: [{
			name: '关注',
			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'
		}],

// tab标签栏改变事件
tabChange(currentIndex) {

				uni.showModal({
					title: "当前选择序列",
					content: "当前选择序列 = " + currentIndex
				})
			}

HTML代码实现部分

<template>
	<view class="content">

		<!-- tabArr：tab数组 tabChange：标签栏切换 -->
		<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>

	</view>
</template>

<script>
	export default {

		data() {
			return {

				tabArr: [{
					name: '关注',
					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'
				}],
			}
		},

		methods: {

			tabChange(currentIndex) {

				uni.showModal({
					title: "当前选择序列",
					content: "当前选择序列 = " + currentIndex
				})
			}


		}
	}
</script>

<style>
	page,
	.content {
		background-color: #f8f8f8;
		height: 100%;
		overflow: hidden;
	}
</style>