收藏
回答

关于当swiper组件循环轮播只有2张图时,自动轮播和手动轮播方向不一致的问题?

swiper组件轮播方向问题
现象描述:当轮播设置了autoplay="true",并自动轮播时,自定义按钮“上一页”,“下一页”在点击时,不是按照一个方向轮播,此问题只出想在只有2张图的情况下,大于等于3张时正常。现象如下面动图。

代码:
wxml:
<view class="intro">当只有2张图的轮播</view>
<view class="dbox">
  <swiper class="swiper_box" style="height:1000rpx;" indicator-dots="true" current="{{current}}" autoplay="true" circular="true">
    <block wx:for="{{list}}" wx:key="index">
      <swiper-item item-id="{{index}}">
        <image class="swiper_item_img" id="{{index}}" src="{{item.urlPath}}" bindload="imgLoadCarousel" lazy-load="true" mode="widthFix"></image>
      </swiper-item>
    </block>
  </swiper>
  <!-- 按钮:下一页 -->
  <view class="btn_next" bindtap="nextImg" style="top:460rpx;">
    <image class="icon_next" src="../images/hotZone_btn.png" mode="widthFix">
    </image>
  </view>
  <!-- 按钮:上一页 -->
  <view class="btn_prew" bindtap="prevImg" style="top:460rpx;">
    <image class="icon_prew" src="../images/hotZone_btn.png" mode="widthFix">
    </image>
  </view>
</view>

    


    
  

js:
const app = getApp()

Page({
  data: {
    //swiper循环数据
    list: [{
      name: "有翡",
      urlPath: "
https://inews.gtimg.com/newsapp_bt/0/12888685886/1000.jpg"
    }, {
      name: "出轨你就死定了",
      urlPath: "https://tu.66vod.net/2020/5272.jpg"
    }],
    current: 0, //当前所在滑块的 index
  },
  onLoad() {

  },

  // 上一页
  prevImg: function () {
    let that = this;
    let current = that.data.current;
    let len = that.data.list.length;
    current--;
    if (current == -1) current = len - 1;
    that.setData({
      current: current
    })

  },

  // 下一页
  nextImg: function () {
    let that = this;
    let current = that.data.current;
    let len = that.data.list.length;
    current++;
    if (current == len) current = 0;
    that.setData({
      current: current
    })
  },
})
wxss:
.intro {
  margin: 30px;
  text-align: center;
}

.dbox {
  width: 100%;
  height: 100%;
  position: relative;
}

swiper {
  border-top: 0;
}

.swiper_box {
  background-color: #fff;
  height: 900rpx;
  background: #fff;
}

.swiper_item_img {
  width: 100%;
  height: 800rpx;
}

.btn_next {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  right: 0rpx;
  background-color: rgba(255, 255, 255, 0.5);
}

.btn_prew {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  left: 0rpx;
  background-color: rgba(255, 255, 255, 0.5);
}

.icon_next {
  margin: 24rpx;
  width: 32rpx;
  height: 32rpx;
  transform: rotate(180deg);
}

.icon_prew {
  margin: 24rpx;
  width: 32rpx;
  height: 32rpx;
}
最后一次编辑于  01-15
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容
问题标签