更新记录

1.0.0（2025-01-16） 下载此版本

1.0.0 创建ay-swiper、ay-swiper-item组件

平台兼容性

ay-swiper 自适应高度swiper

ay-swiper 组件实现了类似淘宝首页金刚区的分页轮播效果，支持动态高度调整，并兼容 UniApp（Web、iOS 和 Android 平台）。

• 支持自动高度适应

• 指示器样式：圆点、块状

• 自定义样式

截图展示

安装

在插件市场导入即可

代码演示

<ay-swiper autoHight autoPlay circular mode="round" indicatorActiveColor="#FFD800">
    <ay-swiper-item>
        <view class="grid">
            <view class="grid-item" v-for="item in list1">
                <image class="grid-item-image" :src="item.icon" mode="widthFix"></image>
                <text class="grid-item-text">{{item.name}}</text>
            </view>
        </view>
    </ay-swiper-item>
    <ay-swiper-item>
        <view class="grid">
            <view class="grid-item" v-for="item in list2">
                <image class="grid-item-image" :src="item.icon" mode="widthFix"></image>
                <text class="grid-item-text">{{item.name}}</text>
            </view>
        </view>
    </ay-swiper-item>
</ay-swiper>

<script setup>
    import {
        ref
    } from 'vue';

    const list1 = ref([{
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
    ])
    const list2 = ref([{
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        }, {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
        {
            icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg',
            name: '淘票票'
        },
    ])
</script>

方法清单

事件清单

赞赏

如果你觉得本插件不错，解决了你的问题，赠人玫瑰，手留余香。

捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。

关于我

支持定制、本地包、源码等，有建议和需要，请联系我

微信：ayao110100

QQ：206788568

博客：https://anyaowl.cn/