收藏
回答

请问swiper左右滑动切换 如何能一直循环滑动

问题模块 框架类型 问题类型 操作系统 工具版本
开发者工具 小程序 需求 Windows 1.01.1805150


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


<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: 1p #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;

}

/*滑动切换结束*/


最后一次编辑于  2018-12-28  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • MCC
    MCC
    2018-12-28


    https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html附带文档地址

    2018-12-28
    赞同
    回复 16
    • 大眼青蛙
      大眼青蛙
      2018-12-28

      感谢


      请问大神 子元素不定高 父元素的高度怎么处理 不写的话就显示不出内容 auto 和100% 都不行

      2018-12-28
      回复
    • MCC
      MCC
      2018-12-28回复大眼青蛙

      你可以父级不写,让子元素撑。但是子集你最好写上

      2018-12-28
      回复
    • 大眼青蛙
      大眼青蛙
      2018-12-29回复MCC

      父集不写

      这里如果不写高 就报错了 好烦恼 不知道怎么写高 不写都不行

      2018-12-29
      回复
    • MCC
      MCC
      2018-12-29回复大眼青蛙

      你可以把style去了,给个class

      2018-12-29
      回复
    • 大眼青蛙
      大眼青蛙
      2018-12-29回复MCC

      去掉之后就不显示了, 给了class之后 如何动态给height呢

      2018-12-29
      回复
    查看更多(11)