uview框架tabs标签

uview框架tabs标签,怎么写每个标签下对应的内容?
例如图三图四,滑动或者点击切换后每个标签下的内容都不一样

img

img

img

img

1.在data函数中定义activeIndex:0 //默认为第一个
2.利用u-tabs组件中的change事件给activitIndex进行赋值

img


3.v-if根据activeIndex的值进行判断,显示你需要的即可


<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
<div  v-if="current=='0'"></div>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: '待收货'
                }, {
                    name: '待付款'
                }, {
                    name: '待评价',
                    count: 5
                }],
                current: 0
            }
        },
        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>