更新记录

1.1（2026-01-06） 下载此版本

标签页修改

1.0.0（2026-01-06） 下载此版本

build v1.0.0

平台兼容性

uni-app(4.0)

其他

wlh-tabs-list使用示例

<template>
    <view class="content" style="marginTop: 0rpx;">
        <wlh-tabs-list :tabs="myTabs" :ids="myIds" :dataLoader="myDataLoader">
            <!-- 自定义第一个标签页的内容 -->
            <template #tab-0="{ list, index, tab }">
                <view class="custom-content" :id="myIds[index]">
                    <view class="header">{{ tab.name }} - 自定义布局</view>
                    <view class="grid">
                        <view v-for="(item, i) in list" :key="i" class="grid-item">
                            <text>{{ item.title }}</text>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 自定义第二个标签页的内容 -->
            <template #tab-1="{ list, index, tab }">
                <view class="custom-content" :id="myIds[index]">
                    <view class="header">{{ tab.name }} - 列表视图</view>
                    <scroll-view scroll-y class="scroll-list">
                        <view v-for="(item, i) in list" :key="i" class="list-item-custom">
                            <view class="item-icon">📄</view>
                            <view class="item-content">
                                <text class="title">{{ item.title }}</text>
                                <text class="desc">{{ item.description || '暂无描述' }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </template>

            <!-- 第三个标签页使用默认内容（不提供插槽） -->
        </wlh-tabs-list>
    </view>
</template>
<script>
    import WlhTabsList from '@/uni_modules/wlh-tabs-list/components/wlh-tabs-list/wlh-tabs-list.vue'
    export default {
        components: {
            WlhTabsList
        },
        data() {
            return {
                myTabs: [{
                        name: '图片墙'
                    },
                    {
                        name: '文章列表'
                    },
                    {
                        name: '默认列表'
                    }
                ],
                myIds: ['wall', 'articles', 'default']
            }
        },
        methods: {
            myDataLoader(index, callback) {
                if (index === 0) {
                    // 图片数据
                    setTimeout(() => {
                        callback([{
                                title: '风景1',
                                id: 1
                            },
                            {
                                title: '风景2',
                                id: 2
                            },{
                                title: '风景3',
                                id: 3
                            },
                            {
                                title: '风景4',
                                id: 4
                            }
                        ]);
                    }, 500);
                } else if (index === 1) {
                    // 文章数据
                    setTimeout(() => {
                        callback([{
                                title: '文章标题A',
                                description: '文章描述A',
                                id: 1
                            },
                            {
                                title: '文章标题B',
                                description: '文章描述B',
                                id: 2
                            }
                        ]);
                    }, 500);
                } else {
                    // 默认数据
                    setTimeout(() => {
                        callback([{
                                title: '默认项目1',
                                id: 1
                            },
                            {
                                title: '默认项目2',
                                id: 2
                            }
                        ]);
                    }, 500);
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .custom-content {
      padding: 20rpx;

      .grid {
        display: flex;
        flex-direction: column;
        gap: 500rpx;
      }
    }

</style>