zoukankan      html  css  js  c++  java
  • 微信小程序swiper组件卡死来回疯狂轮播

    change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:

    1.autoplay 自动播放导致swiper变化;

    2.touch 用户划动引起swiper变化;

    3. 其他原因将用空字符串表示

    <view class="banner mgb24">
          <swiper interval="{{interval}}" duration="{{duration}}" autoplay="{{autoplay}}" circular vertical="{{vertical}}" current="{{current}}" bindchange="swiperChange">
            <swiper-item wx:for="{{banner}}" wx:key="ban" bindtap="navigato" data-url="{{item.url}}">
              <image src="{{item.image}}" mode="aspectFit"></image>
            </swiper-item>
          </swiper>
          <view class="dot">
            <block wx:for="{{banner}}" wx:key="ff">
              <view class='dottt {{index==swiperCurrent?"active":""}}'></view>
            </block>
          </view>
     </view>
    .banner{
      position: relative;
      width: 100%;
      height: 290rpx;
    }
    .banner swiper{
      width:100%;
      height:250rpx;
      border-radius:10rpx;
    }
    .banner .dot{
      display:flex;
      justify-content:center;
      width:100%;
      position:absolute;
      bottom:16rpx;
    }
    .dottt{
      width:20rpx;
      height:8rpx;
      border-radius:5rpx;
      background:#eee;
      margin:0 6rpx;
    }
    .active{
      background: #59C069!important;
    }

    以下是我的解决方法:

       data:{
        swiperCurrent:0,
        current:0,
        circular:true,
        vertical:false,
        autoplay: true,
        interval: 3000,
        duration: 1500,
        dots:true,
        }
    // 轮播图
      swiperChange(e){
        //普通
        // this.setData({
        //   swiperCurrent: e.detail.current
        // })
     
          //防止swiper控件卡死
          if (this.data.current == 0 && this.data.swiperCurrent>1 ) {//卡死时,重置current为正确索引
            this.setData({ current: this.data.swiperCurrent });
          }
          else {//正常轮转时,记录正确页码索引
            this.setData({ swiperCurrent: e.detail.current });
          }
    
      },    
  • 相关阅读:
    三种常用排序理论
    无参带返回类型方法练习
    无参带返回类型方法总结
    Java_无参数无返回类型方法及练习
    Java_方法的调用②及案例
    方法内存分析(进栈(压栈)、出栈(弹栈))
    Java_方法的基本语法格式
    Java_方法的调用①及案例
    Java_方法的定义以及分类
    Java_break与continue区别
  • 原文地址:https://www.cnblogs.com/yun101/p/12490955.html
Copyright © 2011-2022 走看看