weapp-swiper
v1.0.9
Published
use offical Swiper & @Vant/Image, Dev: TypeScript
Downloads
3
Maintainers
Readme
微信小程序轮播组件【复用】
Gitee 同步仓库
Issue 更好的建议或bug报告
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