更新记录

1.0.0（2026-03-19） 下载此版本

• 轮播图组件

平台兼容性

uni-app(3.7.1)

uni-app x(3.7.1)

其他

ziqirj-banner 轮播图组件

组件名：ziqirj-banner 代码块： ziqirj-banner 关联组件：uni-swiper-dot

插件说明

• 1、轮播图组件

使用说明

组件参数

回调函数

使用示例

<template>
    <ziqirj-page-view title="轮播图">
        <ziqirj-banner :list="list" :current="2" />
    </ziqirj-page-view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        "title": "富文本广告",
                        "src": "http://localhost:19005/profile/upload/2026/03/18/20260318110034A001.jpg",
                        "router": "/pages/common/textview/index?title=富文本广告&content=<h2 style=\"text-align: justify;\">单行不换行，超出部分显示省略号</h2><pre style=\"text-align: justify;\"><code class=\"language-css\">white-space:nowrap;\noverflow:hidden;\ntext-overflow:ellipsis;</code></pre><h2 style=\"text-align: justify;\">多行不换行，超出部分显示省略号</h2><pre style=\"text-align: justify;\"><code class=\"language-css\">word-break: break-all;\ntext-overflow: ellipsis;\noverflow: hidden;\ndisplay: -webkit-box;\n-webkit-line-clamp: 2;\n-webkit-box-orient: vertical;</code></pre><h2 style=\"text-align: justify;\">div回显文本域内容换行</h2><pre style=\"text-align: justify;\"><code class=\"language-css\">white-space: pre-wrap; /* 保留空白符并允许自动换行 */\nword-wrap: break-word; /* 允许长词或URL地址断开 */</code></pre><h2 style=\"text-align: justify;\">段落首行缩进两字符</h2><pre style=\"text-align: justify;\"><code class=\"language-css\">font-size: 16px; text-indent: 32px;</code></pre><p><br></p>"
                    },
                    {
                        "title": "外部链接",
                        "src": "http://localhost:19005/profile/upload/2026/03/18/20260318111134A003.jpg",
                        "router": "/pages/common/webview/index?title=外部链接&url=https://www.ziqirj.cn"
                    },
                    {
                        "title": "指定页面",
                        "src": "http://localhost:19005/profile/upload/2026/03/18/20260318111348A004.jpg",
                        "router": "/pages_mine/pages/info/index"
                    },
                    {
                        "title": "指定商品",
                        "src": "http://localhost:19005/profile/upload/2026/03/18/20260318113720A001.jpg",
                        "router": "/pages_mall/pages/goods/details?pkId=4"
                    }
                ]
            }
        },
        methods: {

        }
    }
</script>

<style>

</style>

依赖组件

uni-swiper-dot

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿