更新记录

0.0.3(2024-09-06)

  • 更新依赖

0.0.2(2024-09-06)

  • 更新文档

0.0.1(2024-09-06)

  • init
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.26 app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

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: '淘票票'
                }

            ]
        }
    }
}

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问