小程序封装指示点

<!-- banner封装指示点 -->
<view  class="container">
    <swiper  
        autoplay="{{ true }}"
        interval="1000" 
        circular="{{ true }}"
        bindchange="change"
        >
        
        <swiper-item wx:for="{{ imgs }}">
            <image src="../../static/{{ item }}"></image>
        </swiper-item>
    </swiper>

    <view class="dots">
        <text class="{{ index == activeIndex? 'active' :'' }}" wx:for="{{ imgs }}"></text>
    </view>

</view>

wxss

image{
    width: 100%;
    height: 100%;
}

.dots text{
    display: inline-block;
    width: 20rpx;
    height: 5rpx;
    border: 1px solid  #ccc;
    background-color: sienna;
    border-radius: 4rpx;
    margin-right: 5rpx;
}
.container{
    position: relative;
}
.dots{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 4px;
    text-align: center;
}

.dots  .active{
    background-color: yellow;
}

js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        imgs:["1.jpg","2.jpg","3.jpg"],
        activeIndex:0,
    },

    change(e){
        // console.log(e)
        let current =  e.detail.current;
        this.setData({
            activeIndex:current
        })
    }
})