swipe自定义分页器小圆点的点击事件

发现<swipe> 默认小圆点不可以点击, 小圆点在<swipe>标签里样式也不太好调, 就自定义在<swipe>标签下面了

 

 

 

适合vue2的写法 把红字看看就好了

html:

<!-- 轮播 -->
<swiper class="sign2022-swiper" 
            :circular="autoCircle" 
            :autoplay="autoCircle"
            @change="setCurr"
            :current="pageIndex" // 这行是关键
            :style="{'height':pageHeight+'rpx'}">
            <swiper-item v-for="(item,i) in bannerData " :key="i">
                <scroll-view class="sign2022-swiper-item">
                    <!-- banner 每个banner跳转页面不同-->
                    <image v-if="i != 2" class="sign2022-swiper-item-img" :src="item.imgUrl"
                        @click="skip(i == 0 ? '/pages/live/live' 
                        :i == 1 ? '/pages/order/order'
                        :i == 2 ? '/pages/high/high?tab='+3:'')"></image>
                        <image v-if="i == 2" class="sign2022-swiper-item-img" 
                            :src="item.imgUrl"
                            @click="switchTab(i == 2 ? '/pages/high/high?tab='+3:'')"></image>
                    <view class="sign2022-swiper-item-tag">{{item.tag}}</view>
                    <view class="swiper-item-tit">
                        <view>{{item.zh}}</view>
                        <view class="swiper-item-tit-en">{{item.en}}</view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
        
　　　　<!-- 自定义小圆点 --> <!--style的定位居左距离需要计算如下-->
        <view class="sign2022-swiper-item-pot" :style="{'left': 375-(100*bannerData.length+(bannerData.length-1)*4)/2+'rpx'}">
            <text class="pot-box" v-for="(item,index) in 3 " :key="index"  @click="handleIndex(index)">
                <text class="pot" :class="index==pageIndex ? 'active':''"></text>
            </text>
        </view>

 

script:

data() {
            return {
                
                bannerData:[
                    {imgUrl:'https://t7.baidu.com/it/u=2931491413,1199396761&fm=193&f=GIF',tag:"水墨课",zh:"活动",en:"Activit",item:[]},
                    {imgUrl:'https://img0.baidu.com/it/u=552536560,2425552157&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=571',tag:"艺术课",zh:"艺术",en:"Art",item:[]},
                    {imgUrl:'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/a71ea8d3fd1f41342a4cda4b281f95cad1c85e88.jpg',tag:"设计老师",zh:"大卫",en:"David",item:[]},
                ],
                autoCircle:false,
                pageIndex:0 // 重点
            };
        },  
methods: {
            // 翻图片
            setCurr(e) {
                this.pageIndex = e.detail.current
            },
            
            // 点击小圆点翻图片 就这个函数关键
            handleIndex(index){
                this.pageIndex = index
            },
            
        
            // 跳转二级三级四..页面
            skip(url) {
                // 解决:跳转到其他页面时 swipe的change函数仍然触发
                this.autoCircle = false
                uni.navigateTo({
                    url: url
                });
            },
            
            // 跳转一级页面 :主页面 但跳转tabbar不能带路径 故做缓存处理 
            switchTab(url){
                uni.switchTab({
                    url: url
                });
            },
        },

        // swiper除本页面外也不停触发问题
           /**
           * 生命周期函数--监听页面隐藏
           */
           onHide: function () {
            // console.log('页面走了onHide');
               this.autoCircle = false;
           },
        
           /**
           * 生命周期函数--监听页面卸载
           */
           onUnload: function () {
              this.autoCircle = false;
           },

css: 可能写的不具体 随便写写  不重要

.sign2022-swiper{
    width:750rpx;
    height:86vh;
    position: relative;
}

.sign2022-swiper-item-pot {
        text-align: center;
        margin-top: 14rpx;
        position: absolute;
        bottom: 18rpx;
       
        .pot-box {
            display: inline-block;
            padding: 4rpx 0;
            .pot{
                display: inline-block;
                width: 100rpx;
                height: 4rpx;
                margin: 0 4rpx;
                background-color: #D8D8D8;
                border-radius: 2rpx;
            }
            .active {
                background-color: #767676;
            }
        }
    
       
    }

 

swipe的介绍