uni-app开发微信小程序实现自定义swiper指示灯

柔光的暖阳◎ 2023-02-10 01:21 48阅读 0赞

wxml

<div class="swiper-wrap">
            <swiper class="swiper-inner" @change="swiperChange" :indicator-dots="indicator" :current="cur" :circular="circular" :autoplay="autoplay" :interval= "interval" :duration=
            "duration" >
                <block v-for="(item,index) in imgUrls" :index="index" :key="key">
                    <swiper-item>
                        <image class="banner-img" :src="item.img" mode= "widthFix" @click="swipclick(index)"></image>
                    </swiper-item>
                </block>
            </swiper>
            
            <view class="dots">  
                <block v-for="(item,index) in imgUrls" :index= "index" :key="key">  
                    <view class="dot" :class="{'active':  index == cur}"></view>  
                </block>  
            </view>
            
        </div>

export default {
        data () {
            return {
                imgUrls: [
                {
                    img: 'https://img.benmu-health.com/wechatV2-mina/checkup/banner01.png',
                    url: '/_pages/common/webview/main?url=https://wechat.benmu-health.com/mobile/app/common/material/render/17'
                },
                {
                    img: 'https://img.benmu-health.com/wechatV2-mina/checkup/banner02.png',
                    url: '/pages/checkup/filterPackage/index?category=PARENTS_CHECKUP'
                }
            ],
            indicator: false, //是否显示指示点
            interval: 5000,  //自动切换时间间隔
            duration: 400,  //滑动动画时长
            autoplay: true, //是否自动切换
            circular: true, //是否采用衔接滑动
            cur: 0         //当前所在滑块的index
            }
        },
         methods: {
             //轮播图的切换事件  
             swiperChange (e) {
                // console.log(e)
                this.cur = e.target.current  //获取当前轮播图片的下标, 可以给当前指示点加样式
            },
            swipclick (index) {
                this.$router.open({
                    url: this.imgUrls[index].url
                })
            }
         }
    }

wxss

.swiper-wrap{
        width: 100%;
        height: 165rpx;
        background: #fff;
        position: relative;
        padding-top: 15rpx;
    }
    .swiper-inner{
        width: 690rpx;
        height: 150rpx;
        margin: 0 auto;
    }
    .banner-index{
        width: 690rpx;
        height: 150rpx;
    }
    .swiper-wrap image {
      height: 100%;
      width: 100%;
    }
    .dots{  
        @include rect(300rpx,18rpx);
        position: absolute;
        right: 0;
        bottom: 12rpx;
        left: 0;
        @include align();
    }  
    /*未选中时的小圆点样式 */
    .dot{  
        margin-right: 8rpx;
        @include rect(10rpx,4rpx);
        border-radius: 100rpx;
        background-color: rgba(255,255,255,.4);
    }  
    /*选中以后的小圆点样式  */
    .active{  
        @include rect(16rpx,4rpx);
        background-color: white;
    }

如对你有帮助,可以加下QQ群: 1102727334    有什么问题都可以在群里问寻找解答方案