javascript - uniapp 想实现不同tab 显示不同数据？

Question

如何让不同的分类展示不同的数据
我想让id为1的 显示在全部栏目下 id为2显示吃吃喝喝栏目下 因该怎么改

swiperDateList: [
                    {
                        id: 1,
                        title:'一起吃个饭',
                        time:2020,
                        location: '1111',
                        publisher: '小丁',
                        remark: '备注'
                    },

<template>
    <view class="body-view">
        <!-- 使用scroll-view实现tabs滑动切换 -->
        <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
            <view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)">
                <view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
                    <text class="menu-topic-text">{{item.name}}</text>
                    <view class="menu-topic-bottom">
                        <view class="menu-topic-bottom-color"></view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 内容 -->
        <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
            <swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
                
                <view class="swiper-item">
                    
                    <view class="list">
                        <view class="item">
                            <view class="item-start">
                                <van-tag type="success">标题</van-tag>
                                <span class="item-start-value">{{item.time}}</span>
                            </view>
                            <view class="item-end" data-lat="" data-lng="">
                                <van-tag type="danger">时间</van-tag>
                                <span class="item-end-value">{{item.time}}</span>
                            </view>
                            <view class="item-time">
                                <span> 地点</span>
                                <span class="item-end-value">{{item.location}}</span>
                            </view>
                            <view class="item-seating">
                                <van-tag type="primary">发布人:</van-tag>
                                <span>{{item.publisher}}</span>
                            </view>
                            <van-divider></van-divider>
                            <view class="item-remark">
                                备注：{{item.remark}}
                            </view>
                        </view>
                    </view>
                    
                    
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabs: [{
                        id: 1,
                        name: '全部'
                    },
                    {
                        id: 2,
                        name: '吃吃喝喝'
                    },
                    {
                        id: 3,
                        name: '生活琐碎'
                    },
                    {
                        id: 4,
                        name: '户外放风'
                    },
                    {
                        id: 5,
                        name: '健身自律'
                    },
                    {
                        id: 6,
                        name: '其他'
                    },
                    
                ],
                currentTab: 0,
                tabCurrent: 'tabNum1',
                // Tab切换内容
                swiperDateList: [
                    {
                        id: 1,
                        title:'一起吃个饭',
                        time:2020,
                        location: '1111',
                        publisher: '小丁',
                        remark: '备注'
                    },
                    {
                        id: 1,
                        title:'一起吃个饭2',
                        time:222,
                        location: '2222',
                        publisher: '小丁',
                        remark: '备注2'
                    },
                    {
                        id: 2,
                        content: '交通交通'
                    },
                    {
                        id: 3,
                        content: '住房'
                    },
                    {
                        id: 4,
                        content: '社会保障'
                    },
                    {
                        id: 5,
                        content: '民生热点'
                    },
                    {
                        id: 6,
                        content: '即日头条'
                    },
                ],
            }
        },
        onLoad() {

        },
        methods: {
            swichMenu(id) {
                this.currentTab = id
                console.log(11,id)
                this.tabCurrent = 'tabNum'+ id
                
            },
            swiperChange(e) {
                console.log(22,e.detail.current)
                let index = e.detail.current
                this.swichMenu(index)
            }
        }
    }
</script>

<style scoped lang="scss">
    .body-view {
        height: 100vh;
        width: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        align-items: flex-start;
        justify-content: center;
    }

    .top-menu-view {
        display: flex;
        position: fixed;
        top: 0rpx;
        left: 0;
        white-space: nowrap;
        width: 100%;
        background-color: #FFFFFF;
        height: 86rpx;
        line-height: 86rpx;
        border-top: 1rpx solid #d8dbe6;

        .menu-topic-view {
            display: inline-block;
            white-space: nowrap;
            height: 86rpx;
            position: relative;

            .menu-topic-text {
                font-size: 30rpx;
                color: #303133;
                padding: 10rpx 40rpx;
            }

            // .menu-topic-act {
            //     margin-left: 30upx;
            //     margin-right: 10upx;
            //     position: relative;
            //     height: 100%;
            //     display: flex;
            //     align-items: center;
            //     justify-content: center;
            // }

            .menu-topic-bottom {
                position: absolute;
                bottom: 0;
                width: 100%;

                .menu-topic-bottom-color {
                    width: 40rpx;
                    height: 4rpx;
                }
            }

            .menu-topic-act .menu-topic-bottom {
                display: flex;
                justify-content: center;
            }

            .menu-topic-act .menu-topic-bottom-color {
                background: #3d7eff;
            }



        }


    }

    .swiper-box-list {
        width: 100%;
        padding-top: 200rpx;
        flex:1;
        background-color: #FFFFFF;
        .swiper-topic-list {
             width: 100%;
         }
    }
</style>

Answer 1

看你的数据是怎么来的，如果是一次性读取到全部的，可以用以下两种方式：

1. 在获取到数据之后做好分类，分类在几个不同的当中，然后再模版中按照不同情况渲染列表面板，多数情况下会使用 uViewUI 的tabs组件。然后按照激活标签显示对应的面板。
2. 获取到数据之后直接赋值给一个变量，使用 uViewUI 的tabs组件绑定激活标签变量，配合 computed 来动态变更显示列表。

如果不同面板是请求不同的借口的，依旧会是按照方式1.来处理，只不过会增加一个loading效果。