更新记录

1.0.0（2026-07-24） 下载此版本

首次发布

平台兼容性

uni-app(5.05)

其他

hero-list

插件地址 https://ext.dcloud.net.cn/plugin?id=28930

功能&特点

• 引用了z-paging分页插件
• 【配置简单】直接引入即可使用。

使用方式

引入

    import heroList from '@/components/hero-list/hero-list.vue'
    import heroCard from '@/components/hero-card/hero-card.vue'

使用

<template>
    <view class="page">
        <hero-list
            ref="heroList"
            :page-size="10"
            @query="queryList"
            @item-click="handleItemClick"
        />
    </view>
</template>

分页的方法

            queryList(pageNo, pageSize) {
                this.getHeroData(pageNo, pageSize).then(res => {
                    res.sort((a, b) => {
                        if (a.isTop && !b.isTop) return -1
                        if (!a.isTop && b.isTop) return 1
                        return 0
                    })
                    const hasMore = pageNo * pageSize < this.totalCount
                    this.$refs.heroList.complete(res, hasMore)
                }).catch(error => {
                    console.error('Failed to load hero data:', error)
                    this.$refs.heroList.complete([], false)
                })
            },

演示数据

            getHeroData(pageNo, pageSize) {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        const start = (pageNo - 1) * pageSize
                        const end = Math.min(start + pageSize, this.totalCount)
                        const data = []
                        const badges = ['旅游', '热门', '推荐', '精选', '限时']
                        const titles = [
                            '全国旅游线路推荐', '周末周边游', '亲子乐园', '海岛度假', '古镇风情',
                            '山水风光', '文化之旅', '美食探索', '户外探险', '温泉养生',
                            '滑雪胜地', '赏花之旅', '摄影采风', '蜜月旅行', '毕业旅行'
                        ]
                        const descriptions = [
                            '旅游路线规划，不烧CPU;世界辣么大，我想去看看。',
                            '精选周边景点，周末休闲好去处，放松身心，享受生活。',
                            '带娃好去处，寓教于乐，让孩子在游玩中成长。',
                            '碧海蓝天，沙滩椰林，享受阳光海浪的惬意时光。',
                            '青砖灰瓦，古巷深深，感受历史文化的厚重韵味。',
                            '青山绿水，自然风光，远离城市喧嚣的宁静之地。',
                            '探访古迹，品味文化，开启一段穿越时空的旅程。',
                            '舌尖上的美味，各地特色美食等你来发现。',
                            '挑战自我，探索未知，开启刺激的户外冒险之旅。',
                            '放松身心，养生保健，享受温泉带来的舒适体验。'
                        ]
                        for (let i = start; i < end; i++) {
                            data.push({
                                bgImage: `https://picsum.photos/800/900?random=${i + 1}`,
                                badge: badges[i % badges.length],
                                title: titles[i % titles.length] + (Math.floor(i / titles.length) + 1),
                                description: descriptions[i % descriptions.length],
                                buttonText: ['立即查看', '查看详情', '了解更多', '立即预订'][i % 4],
                                url: `/pages/travel/list?id=${i + 1}`,
                                isTop: i === 0 || i === 2 || i === 5
                            })
                        }
                        resolve(data)
                    }, 500)
                })
            },

完整演示代码

<template>
    <view class="page">
        <hero-list
            ref="heroList"
            :page-size="10"
            @query="queryList"
            @item-click="handleItemClick"
        />
    </view>
</template>

<script>
    import heroList from '@/components/hero-list/hero-list.vue'
    import heroCard from '@/components/hero-card/hero-card.vue'

    export default {
        components: {
            heroList,
            heroCard
        },
        data() {
            return {
                title: '首页',
                totalCount: 50
            }
        },
        methods: {
            queryList(pageNo, pageSize) {
                this.getHeroData(pageNo, pageSize).then(res => {
                    res.sort((a, b) => {
                        if (a.isTop && !b.isTop) return -1
                        if (!a.isTop && b.isTop) return 1
                        return 0
                    })
                    const hasMore = pageNo * pageSize < this.totalCount
                    this.$refs.heroList.complete(res, hasMore)
                }).catch(error => {
                    console.error('Failed to load hero data:', error)
                    this.$refs.heroList.complete([], false)
                })
            },
            getHeroData(pageNo, pageSize) {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        const start = (pageNo - 1) * pageSize
                        const end = Math.min(start + pageSize, this.totalCount)
                        const data = []
                        const badges = ['旅游', '热门', '推荐', '精选', '限时']
                        const titles = [
                            '全国旅游线路推荐', '周末周边游', '亲子乐园', '海岛度假', '古镇风情',
                            '山水风光', '文化之旅', '美食探索', '户外探险', '温泉养生',
                            '滑雪胜地', '赏花之旅', '摄影采风', '蜜月旅行', '毕业旅行'
                        ]
                        const descriptions = [
                            '旅游路线规划，不烧CPU;世界辣么大，我想去看看。',
                            '精选周边景点，周末休闲好去处，放松身心，享受生活。',
                            '带娃好去处，寓教于乐，让孩子在游玩中成长。',
                            '碧海蓝天，沙滩椰林，享受阳光海浪的惬意时光。',
                            '青砖灰瓦，古巷深深，感受历史文化的厚重韵味。',
                            '青山绿水，自然风光，远离城市喧嚣的宁静之地。',
                            '探访古迹，品味文化，开启一段穿越时空的旅程。',
                            '舌尖上的美味，各地特色美食等你来发现。',
                            '挑战自我，探索未知，开启刺激的户外冒险之旅。',
                            '放松身心，养生保健，享受温泉带来的舒适体验。'
                        ]
                        for (let i = start; i < end; i++) {
                            data.push({
                                bgImage: `https://picsum.photos/800/900?random=${i + 1}`,
                                badge: badges[i % badges.length],
                                title: titles[i % titles.length] + (Math.floor(i / titles.length) + 1),
                                description: descriptions[i % descriptions.length],
                                buttonText: ['立即查看', '查看详情', '了解更多', '立即预订'][i % 4],
                                url: `/pages/travel/list?id=${i + 1}`,
                                isTop: i === 0 || i === 2 || i === 5
                            })
                        }
                        resolve(data)
                    }, 500)
                })
            },
            handleItemClick(item) {
                uni.showToast({
                    title: `进入${item.title}`,
                    icon: 'success',
                })
                // uni.navigateTo({ url: item.url })
            }
        }
    }
</script>

<style lang="scss" scoped>
.page {
    height: 100vh;
    box-sizing: border-box;
}
</style>