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