请问swiper左右滑动切换 如何能一直循环滑动
发布于 6 年前 作者 guiying38 11144 次浏览 来自 问答

怎样让它一直可以往左循环滑动切换 而不是滑到高级套餐就不能滑动了

<view class=“swiper-tab”>

  <view class=“swiper-tab-list ttw {{currentTab==0 ? ‘on’ : ‘’}}” data-current=“0” bindtap=“swichNav”>基础套餐</view>

  <view class=“swiper-tab-list {{currentTab==1 ? ‘on’ : ‘’}}” data-current=“1” bindtap=“swichNav”>高级套餐</view>

</view>

<view class=“swiper-tab-temp”></view>

<view class=“zhuti”>

  <swiper current="{{currentTab}}" autoplay="{{true}}" class=“swiper-box” duration=“300”>

    <swiper-item style=“background-color:red”>

      红色内容

    </swiper-item>

    <swiper-item style=“background-color:green”>

      绿色内容

    </swiper-item>

  </swiper>

</view>

/**index.wxss**/

page {

  background: #f6f6f6;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  font-family: PingFangSC-Light,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif;

  height:10000rpx;

}

.huise{

  width:100%;

  height:72rpx;

  background:#313131;

  line-height:72rpx;

  font-size:28rpx;

  color:#fff;

  text-align:center;

}

.ttt{

    width: 126px;

    height: auto;

    margin: 0 auto;

    padding-top: 12px;

    padding-bottom: 12px;

}

.ttt image{width:100%;height:70rpx;}

.banner{width:100%;}

.banner image{width:100%;height:520rpx;}

.qb{width:100%;height:80rpx;text-align:center;font-size:36rpx;line-height:80rpx; color: #171717;font-weight:bold;margin-top:40rpx;}

.xian {

    width: 160rpx;

    height: 2rpx;

    background: #b6b1b1;

    margin: 0 auto;

    margin-bottom: 15px;

    margin-top: 5px;

}

.haoduo{width:100%;margin-top:40rpx;}

.haoduo ul li{width:25%;float:left;text-align:center;}

.haoduo ul li p{display:block;text-align:center;height: 52rpx;line-height: 52rpx; font-size: 28rpx;}

.haoduo ul li image{width:112rpx;height:112rpx;display:block;margin:0 auto;}

.haode{width:100%;font-size: 32rpx;color: #a88950;font-weight: lighter;line-height: 48rpx;text-align: center;margin-top:40rpx;margin-bottom:40rpx;}

.xiaobiao{width:100%;height:80rpx;margin-top:40rpx;}

.xiaobiao input{ width:90%;height:80rpx;margin:0 auto; display: block;border: 1px #383737 solid;border-radius: 6px;font-size:32rpx;padding-left:10rpx}

.tijiao{ display: block;

    width: 60%;

    border: 0;

    border-radius: 24rpx;

    background-color: #ff0000;

    color: #fff;

    margin:0 auto;

    font-size: 28rpx;height:80rpx;text-align:center;line-height:80rpx;margin-top:50rpx;}

  .tijiao button{    background-color: #ff0000;color:#fff;}

.qbao{width: 100%;background: #eaeaea;overflow:hidden;

margin-top:50rpx;

padding-bottom:50rpx;

}

.xian1{

    width: 100%;

    height:32rpx;

    line-height:32rpx;

    color: #b1b1b1;

    margin: 0 auto;

    font-size: 24rpx;

    text-align: center;

}   

.fudong{clear:both;height:40rpx;}

/*滑动切换开始*/

  .swiper-tab {

    width: 98%;

    margin: 0 auto;

    height: 80rpx;

    line-height: 80rpx;

    font-size: 40rpx;

    position: relative;

    margin-bottom: 40rpx;

    margin-top: 20rpx;

}

.swiper-tab-list {

    float: left;

    width: 50%;

    color: #666;

    text-align: center;

    font-size: 28rpx;

    color: #666666;

    height: 80rpx;

    line-height: 80rpx;

    border-radius: 64rpx;

    border: 2rpx solid #707070;

    color: #262626;

    margin-left: -60rpx;

}

.on {

    color: #fff;

    background: #707070;

}

.ttw{margin-left: 15px;}

.swiper-box {

  display: block;

  height: 100%;

  width: 100%;

  overflow: hidden;

}

.swiper-box view {

  text-align: center;

}

/*滑动切换结束*/

回到顶部