Samurai Goods Swiper
samurai-goods-swiper 商品详情页轮播图
介绍
商品详情页的商品轮播图组件, 可自定义宽高及 分页器的是否显示,及位置, 该组件只能用于 app 端,因为使用了 load 方法,优化了swiper 的性能
引入
import samuraiGoodsSwiper from '../../components/samurai-goods-swiper/samurai-goods-swiper.stml'
用法
<samurai-goods-swiper :swiper-list="list" swiper-width="" swiper-height="200" :autoplay="true" :showIndicator="true"
indicatorPosition="right" @samurai-goods-swiper-click="aaa" @samurai-goods-swiper-change="bbb" />
属性
属性名 | 类型 | 说明 | 默认值 | 是否必传 | 可选值 | |
---|---|---|---|---|---|---|
swiper-list | arr | 传入商品图片列表 | 无 | true | ||
swiper-width | Number | 整个轮播图的宽度 | 100% | false | px | |
swiper-height | Number | 整个轮播图的高度 | 360 | false | px | |
autoplay | boolean | 是否自动切换 | false | false | true,false | |
showIndicator | boolean | 是否显示分页器 | false | false | true,false | |
indicatorPosition | String | 分页器显示位置 | right | false | left,center,right |
注意
swiper-list 传入的图片数组为 ["...","..."],不可传入对象,否则无法识别
事件
事件名 | 说明 | 内容 | |
---|---|---|---|
samurai-goods-swiper-click | 点击轮播图后返回对应的索引 | detail.index | |
samurai-goods-swiper-change | 轮播图切换后返回对应的索引 | detail.index |