• 微信小程序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 });
          }
    
      },    
  • 相关阅读:
    Vue.js 转自http://zhuanlan.zhihu.com/evanyou/20302927
    Linux 下的终端
    图像热点(图像地图)
    网页多媒体 flash
    下拉列表
    <input> type 属性
    <form>表单
    表格结构
    简介
    <meta>标记
  • 原文地址:https://www.cnblogs.com/yun101/p/12490955.html
Copyright © 2020-2023  润新知