更新记录

0.0.5(2024-06-07)

优化

0.0.4(2024-06-05)

插件包更新

0.0.3(2024-06-05)

兼容更新,各平台可自测是否支持

查看更多

平台兼容性

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

使用方式

<template>
  <view class="test">
    <vi-swiper :list="list" v-model="current" @change="onChange" @click="onClick"></vi-swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          'https://img.zcool.cn/community/01dedb5be3fa58a801209252787070.jpg@1280w_1l_2o_100sh.jpg',
          'https://img.zcool.cn/community/014d105978da02a8012193a3d2a344.jpg',
          'https://img.zcool.cn/community/014aae5ee1feefa801215aa0785cc4.jpg@2o.jpg'
        ],
        current: 0
      }
    },
    methods: {
      onChange(i) {
        console.log('onChange', i)
      },
      onClick(i) {
        console.log('onClick', i)
      }
    }
  }
</script>

属性说明

名称 类型 默认值 描述
value Number 0 当前数据源索引值
list Array [] 轮播数据源
radius Boolean true 是否开启圆角
radiusSize mini, normal, large normal 圆角大小
swiperWidth Number 650 轮播容器宽度
swiperHeight Number 350 轮播容器高度
verticalPadding Number 350 垂直方向内边距
horizontalPadding Number 50 水平方向内边距
pxUnit String rpx 像素单位
transDuration Number 1 动画持续时长(单位:秒)
autoplay Boolean true 是否自动轮播
indicator-dots Boolean true 是否显示面板指示点
circular Boolean true 是否采用衔接滑动,即播放到末尾后重新回到开头
interval Number 5000 轮播自动切换时间间隔
@change Function 轮播图改变回调
@click Function 点击轮播图事件

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

1、本插件可免费下载使用;

2、未经许可,严禁复制本插件派生同类插件上传插件市场;

3、未经许可,严禁在插件市场恶意复制抄袭本插件进行违规获利;

4、对本软件的任何使用都必须遵守这些条款,违反这些条款的个人或组织将面临法律追究。

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