samurai-goods-swiper

samurai-goods-swiper 商品详情页轮播图

介绍

商品详情页的商品轮播图组件, 可自定义宽高及 分页器的是否显示,及位置, 该组件只能用于 app 端,因为使用了 load 方法,优化了swiper 的性能

引入

import samuraiGoodsSwiper from '../../components/samurai-goods-swiper/samurai-goods-swiper.stml'
~~~ 
   
## 用法
~~~html
<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
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18