先上效果图:
需求分析:这类轮播图宽度没有沾满屏幕宽度的 100% ,且上一张或下一张图片也显示在页面上。轮播图下方有相关商品描述信息,自定义轮播图选中指示点样式切换。
在 swiper 中, 由于图片和描述信息放在 swiper-item 中,合在一起做 swiper-item 中轮播元素。
HTML:
<view class="banner-swiper">
<swiper indicator-dots="{{indicator}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}"
bindchange="swiperChange">
<block wx:for="{{arr}}" wx:key="key">
<swiper-item>
<image src="{{item.images}}" class="slide-image {{index == swiperCurrent ? ' active' : ''}}"></image>
<view class='goods-info'>商品信息</view>
</swiper-item>
</block>
</swiper>
自定义指示点
</view>
在 swiper 中,设置相关配置,这里将 indicator-dots 设置为 false(是否显示面板指示点)
beforeColor: "white",//指示点颜色
afterColor: "coral",//当前选中的指示点颜色
previousmargin: '24px',//前边距
nextmargin: '24px',//后边距
indicator: false, //是否显示指示点
interval: 5000, //自动切换时间间隔
duration: 400, //滑动动画时长
autoplay: true, //是否自动切换
circular: true, //是否采用衔接滑动
cur: 0, //当前所在滑块的index
自定义 指示点 样式:
<view class="dots">
<block wx:for="{{arr}}" wx:key="{{index}}">
<view class="{{index== cur?'active':''}} dot"></view>
</block>
</view>
bindchange事件:current 改变时会触发 change 事件,event.detail = {current: current, source: source}
//轮播图的切换事件
swiperChange(e) {
let cur = e.detail.current //获取当前轮播图片的下标, 可以给当前指示点加样式
this.setData({
cur: cur
})
},
查看完整案例