swiper组件添加左右箭头

前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。

思路很简单:在swiper组件内部添加两个image组件,绑定点击事件,动态改变swiper中的current值。不废话,主要看代码:

WXML:

<swiper indicator-dots="{{swiper.indicatorDots}}"
  autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" current='{{swiper.current}}' circular="true">
  <block wx:for="{{swiper.imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
  <image class='prev arrow' bindtap='prevImg' src='/images/prev.jpg' />
  <image class='next arrow' bindtap='nextImg' src='/images/next.jpg' />
</swiper>

WXSS:

swiper{
  position: relative;
  height: 300rpx;
}
swiper image{
  display: block;
  width: 100%;
  height: 300rpx;
  cursor: pointer;
}

swiper .arrow{
  width: 30rpx;
  height: 46rpx;
}

swiper .prev{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
}

swiper .next{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

JS:

//index.js
Page({
  data: {
    swiper: {
      imgUrls: [
        '/images/swiper01.jpg',
        '/images/swiper02.jpg',
        '/images/swiper03.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 () {
    var swiper = this.data.swiper;
    var current = swiper.current;
    swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
    this.setData({
      swiper: swiper,
    })
  }
})

看一下完成之后的效果:

貌似还不错,有用到这功能的同学,直接copy代码运行即可~

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

Xamarin使用ListView开启分组视图Cell数据展示bug处理

问题描述 Xamarin使用IsGroupingEnabled="true"之后再Cell操作就会出现数据展示bug,数据不刷新的问题,如下图所示: ? 点击取...

1957
来自专栏成猿之路

一大波编程学习资源

1566
来自专栏前端新视界

React 系列教程 1:实现 Animate.css 官网效果

这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子,...

510
来自专栏听雨堂

用多个类别来进行微调

          有时css的类基本设计好了,对于大多数的标签都能够实用,但却又个别的不行。如,菜单项,绝大多数都是2个字的,总体上按照这个宽度来设计,但还有...

1878
来自专栏程序人生 阅读快乐

《面向模式的软件架构 资源管理模式 卷3》

作为面向模式的软件架构系列丛书的第3卷,《面向模式的软件架构,卷3:资源管理模式》不仅详尽地阐述了资源管理模式,而且通过几个示例演示了如何将其付诸应用。《面向模...

501
来自专栏九彩拼盘的叨叨叨

我完成的百度前端技术学院任务列表

662
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

3758
来自专栏青枫的专栏

c语言几个松散的地方(不足的地方,不严谨的地方,它容易出错的地方)。

c语言是面向过程的语言,是弱类型语言,c语言的源代码基本就是无数个函数的堆砌。 即很多函数就组成c语言源代码了,也即它的源代码基本就是函数构成的。

642
来自专栏雪地二货笔记库

架构模式之MVVM

  MVVM是一种较为新颖的架构模式,在本文中会涉及一小点vue代码,建议在阅读本文档前先对这门技术做一些学习。

36820
来自专栏小李刀刀的专栏

动态实现指定图片半透明及鼠标事件

说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现: 1.假设我们要...

2669

扫码关注云+社区