微信小程序swiper添加左右箭头切换功能

最新推荐文章于 2024-07-15 15:09:44 发布

转载最新推荐文章于 2024-07-15 15:09:44 发布 · 5.4k 阅读

文章标签：

#小程序 #swiper

jQuery 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何在微信小程序中使用Swiper组件添加左右箭头实现图片轮播切换功能，包括wxml、wxss和js代码示例，通过实际案例展示如何自定义样式和交互效果。

微信小程序swiper添加左右箭头添点击切换功能，在网上找了一下，发现大部分都是同一个人发布的，而且有地方无法正常运行，在自己的研究下，在原有代码的基础上修改了一下，已可以正常运行，运行的效果如下

wxml代码

<view class='ceshi_swiper'>
    <swiper class='read_swiper' indicator-dots='{{swiper.indicatorDots}}' autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" current="{{swiper.current}}">
      <block wx:for="{{swiper.imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image"></image>
        </swiper-item>
      </block>
    </swiper>
    <view class='ceshi_next' bindtap='prevImg'>
      <text class='icon iconfont icon-you'></text>
    </view>
    <view class='ceshi_prew' bindtap='nextImg'>
      <text class='icon iconfont icon-zuo'></text>
    </view>
  </view>

wxss代码

.ceshi_swiper {
  width: 599rpx;
  margin: 10rpx auto;
  position: relative;
}

.ceshi_prew text {
  color: #fff;
  font-size: 30rpx;
  float: left;
  margin-top: 15rpx;
}

.ceshi_next text {
  color: #fff;
  font-size: 30rpx;
  display: block;
  float: right;
  margin-top: 15rpx;
}

.ceshi_next {
  width: 40rpx;
  height: 80rpx;
  position: absolute;
  top: 120rpx;
  right: 0rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-top-left-radius: 80rpx;
  border-bottom-left-radius: 80rpx;
}

.ceshi_prew {
  width: 40rpx;
  height: 80rpx;
  position: absolute;
  top: 120rpx;
  left: 0rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-top-right-radius: 80rpx;
  border-bottom-right-radius: 80rpx;
}

.zuopin_qh {
  float: left;
}

.read_kecheng {
  background: #fff;
}

.zuopin {
  overflow: hidden;
  margin: 10rpx auto;
  background: #fff;
  width: 610rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.zuopin_qh {
  margin-left: 15rpx;
  margin-right: 15rpx;
}
.zuopin_qh image{  box-shadow: 0 0 10px #dadada;}
.zuopinr {
  background: #f2b91c;
  width: 48rpx;
  height: 48rpx;
  border-radius: 48rpx;
  color: #fff;
  font-size: 35rpx;
  text-align: center;
  right: 20rpx;
  position: absolute;
  top: 160rpx;
}

.zuopinl {
  background: #f2b91c;
  width: 48rpx;
  height: 48rpx;
  border-radius: 48rpx;
  color: #fff;
  font-size: 35rpx;
  text-align: center;
  left: 20rpx;
  position: absolute;
  top: 160rpx;
}

.zuopin_read {
  position: relative;
}
swiper.zuopin_read_swiper{height: 500rpx;}
swiper.zuopin_read_swiper{height: 500rpx;}
.ceshi_swiper image{width: 599rpx;height:323rpx;}
.ceshi_swiper2 image{width: 626rpx;height:337rpx;}
swiper.ceshi_swiper_s{height: 337rpx;}
swiper.read_swiper{height: 323rpx;}

js代码

Page({

  data: {

    swiper: {
      imgUrls: [
        '/assets/images/huodong_tupian.jpg',
        '/assets/images/huodong_tupian.jpg',
        '/assets/images/huodong_tupian.jpg'
      ],
      indicatorDots: true,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      current: 0,
    },
  },

  prevImg: function() {
    var swiper = this.data.swiper;
    var current = swiper.current;
    swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
    this.setData({
      swiper: swiper,
    })
  },

  nextImg: function() {
    console.log(2);
    var swiper = this.data.swiper;
    var current = swiper.current;
    swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
    this.setData({
      swiper: swiper,
    })
  },
})

作者：轩辕夜空
链接：https://www.jianshu.com/p/b9b2a6aca180
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。