更新记录

0.0.3（2024-09-06）

• 更新依赖

0.0.2（2024-09-06）

• 更新文档

0.0.1（2024-09-06）

• init

平台兼容性

uni-app

uni-app x

lime-fit-swiper

• 仿淘宝金刚区滚动切换高度的轮播
• 初版 可能存在BUG

安装

在插件市场导入即可

代码演示

基础使用

<l-fit-swiper>
    <l-fit-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>
    </l-fit-swiper-item>
    <l-fit-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>
    </l-fit-swiper-item>
</l-fit-swiper>

    export default {
    data() {
        return {
            list1: [
                {
                    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: '淘票票'
                }
            ],
            list2: [
                {
                    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: '淘票票'
                },
                {
                    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: '淘票票'
                }

            ]
        }
    }
}

打赏

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