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 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 小程序自定义组件怎么用?看完这篇文章你就知道了

之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。

1113
来自专栏一个会写诗的程序员的博客

Python 使用 pygame 实现一个简单的动画

1164
来自专栏deepcc

jQuery 2.0将不再支持IE 6/7/8

2836
来自专栏静默虚空的博客

jQuery 简介和安装

什么是jQuery jQuery是一个轻量级的"写的少,做的多"的JavaScript库。 jQuery库包含以下功能: HTML 元素选取 HTML 元素...

2205
来自专栏快乐八哥

使用jQuery Tools scrollable注意事项

项目开发中一直使用jQuery Tools中scrollable插件,一直也只是停留在使用上,最多看文档实现如何调用它的prev(spped)和next(spe...

18810
来自专栏前端人人

React第三方组件1(路由管理之Router的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2633
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

3145
来自专栏依乐祝

.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CM...

1363
来自专栏鬼谷君

使用autoc js生成文章目录(侧边)导航栏

2052
来自专栏疯狂的小程序

关于微信小程序内置组件swiper,circular使用分享

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技...

53110

扫码关注云+社区