微信小程序轮播组件【复用】

Gitee 同步仓库

仓库地址：https://gitee.com/wepalm/weapp-component-reuse

Issue 更好的建议或bug报告

提交 Issue

PR 更好的开发完善建议

提交 PR

组件使用说明

组件示例展示【高度自定义，不同方式展现轮播】

依赖：
1、官方swiper组件
2、@Vant/weapp/image 组件

@Vant-Weapp
INSTALL: npm i @vant/weapp -S --production

安装

npm i weapp-swiper

安装后构建NPM后即可直接使用, 构建后的目录自行参考微信小程序开发文档说明

页面配置 page.json

组件Tag名请勿使用 swiper 否则和官方组件重名，导致参数配置失败

{
  "usingComponents": {
    "swipers": "YOUR_PATH/weapp-swiper/swiper",
  }
}

组件参数属说明

支持运行的 数据列表 基础结构

{
    "id": 1,
    "title": "Title",
    "subtitle": "SubTitle",
    "description": "Description",
    "image": "IMG_URL_PATH",
    "pagepath": "Weapp PagePath",
    "target": "self | miniProgram",
    "appid": "APPID",
    "app_version": "trial | release | develop"
}

无需声明跳转名单，不限跳转数量（众测中）
官方说明

从2020年4月24日起，使用跳转其他小程序功能将无需在全局配置中声明跳转名单，调用此接口时将不再校验所跳转的 AppID 是否在 navigateToMiniProgramAppIdList 中。

从2020年4月24日起，跳转其他小程序将不再受数量限制，使用此功能时请注意遵守运营规范。

• options 共享App.wxss样式 apply-shared
• Props

Component({
    properties: {
        // ...
    }
})

• 自定义组件参数

参数 | 说明 | 类型 | 默认 ---|---|---|--- swiperHeight | swiper高度，接受任意css单位，或数值 | any [number, string] | 220px swiperList | 数据列表 | any | pending swiperList.pagepath | 数据列表，页面路径，数据中有该属性则可跳转到指定页面 | string | pending noText | 轮播图片浮层文字，为true则彻底不显示 | Boolean | false customStyle | 自定义style | any | 无 customClass | 自定义外部class | any | 无 imgMode | Vant图片组件MODE方式 | string | cover imgRadius | Vant图片圆角大小 | any | 0

• swiper默认参数

参数 | 说明 | 类型 | 默认 ---|---|---|--- autoplay | 自动播放 | true | true dot | 展示切换焦点 | boolean | true circular | 无缝切换 | boolean | false vertical | 垂直切换 | boolean | false interval | 轮播切换时间 | number | 5000