sooka_consult_uniapp/pages/demo/fenlei/fenlei.vue

<template>
    <view>
        <mp-vtabs :vtabs="vtabs" :activeTab="activeTab" @tabclick="onTabCLick" @change="onChange">
            <block v-for="(item, index) in vtabs" :key="index">
                <mp-vtabs-content :tabIndex="index">
                    <view class="vtabs-content-item">
                        <span class="vtabs-contentTitle">{{ item.title }}</span>
                        <ul class="spflList">
                            <li>
                                <image src="/static/pages/images/ty.png"></image>
                                <span>体育用品</span>
                            </li>
                            <li>
                                <image src="/static/pages/images/tongzhuan.png"></image>
                                <span>童装</span>
                            </li>
                            <li>
                                <image src="/static/pages/images/waitao.png"></image>
                                <span>外套</span>
                            </li>
                            <li>
                                <image src="/static/pages/images/yumi.png"></image>
                                <span>农产品</span>
                            </li>
                        </ul>
                    </view>
                </mp-vtabs-content>
            </block>
        </mp-vtabs>
    </view>
</template>

<script>
import mpVtabs from '../../../components/vtabs/vtabs/index.vue';
import mpVtabsContent from '../../../components/vtabs/vtabs-content/index.vue';
// pages/fenlei.js
export default {
    components: {
        mpVtabs,
        mpVtabsContent
    },
    data() {
        return {
            vtabs: [],
            activeTab: 0,
            test: 111
        };
    },
    onLoad() {
        const vtabs = [
            {
                title: '热搜推荐'
            },
            {
                title: '手机数码'
            },
            {
                title: '家用电器'
            },
            {
                title: '生鲜果蔬'
            },
            {
                title: '酒水饮料'
            },
            {
                title: '生活美食'
            },
            {
                title: '美妆护肤'
            },
            {
                title: '个护清洁'
            },
            {
                title: '女装内衣'
            },
            {
                title: '男装内衣'
            },
            {
                title: '鞋靴箱包'
            },
            {
                title: '运动户外'
            },
            {
                title: '生活充值'
            },
            {
                title: '母婴童装'
            }
        ];
        // const vtabs = titles.map(item => ({title: item}))
        this.setData({
            vtabs: vtabs
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onTabCLick(e) {
            const index = e.detail.index;
            console.log('tabClick', index);
        },

        onChange(e) {
            const index = e.detail.index;
            console.log('change', index);
        }
    }
};
</script>
<style>
@import 'fenlei.css';
</style>