uniapp开发中，实现tabs及对应tabs内容的切换(ui库：uview）

总体来说的思路就是tabs和下方对应的展示内容，通过tabs的index联系在一起即可实现联动切换的效果

          <template>
		<view style="margin-bottom: 8rpx;margin-top: 6rpx;">
			<u-tabs active-color="#F2672E" :list="tabsList" :is-scroll="false"
				:current="tabsIndex" @change="change"></u-tabs>
		</view>

                <!-- 底部动态展示的内容 -->
		<view style="background-color: transparent;padding: 0 31rpx;">
			<view v-if="tabsCount === 0">
				<view style="height:400rpx;background-color:#fff;">
                                    <text>1</text>
                                    <text>2</text>
                                    <text>3</text>
                                </view>
			</view>
			<view v-if="tabsCount === 1">
                                <view style="height:400rpx;background-color:#fff;">
                                    <text>11</text>
                                    <text>22</text>
                                    <text>33</text>
                                </view>
			</view>
			<view v-if="tabsCount === 2">
				<view style="height:400rpx;background-color:#fff;">
                                    <text>111</text>
                                    <text>222</text>
                                    <text>333</text>
                                </view>
			</view>
		</view>
        </template>
        <script>
            export default {
		data() {
			return {
				tabsIndex: 0, // 控制tabs的index
				tabsList: [{
						name: '用火申请'
					},
					{
						name: '有奖举报'
					},
					{
						name: '火情报警'
				}],
                                
                           }
                         },
                         methods:{
                             change(index) { // tabs切换的方法
				this.tabsIndex = index;
                            },    
                         }
                     }
        </script>