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

相关文章

来自专栏静默虚空的博客

jQuery 简介和安装

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

2425
来自专栏快乐八哥

使用jQuery Tools scrollable注意事项

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

20410
来自专栏疯狂的小程序

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

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

67610
来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

1350
来自专栏大前端开发

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

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

7245
来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

5996
来自专栏CSDN技术头条

【独家】饿了么前端团队快应用背后研发实践

饿了么是一年前开始参与内测尝试开发快应用的,看着快应用平台一步一步的走过来,发展的越来越好。目前来说快应用开发条件已经比较完善,本次分享,为大家介绍前端开发人员...

2303
来自专栏依乐祝

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

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

1913
来自专栏coding

vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

941
来自专栏coding for love

在线商城项目05-利用mock数据进行渲染和图片懒加载

既然我们已经能从mock服务器拿到mock数据,现在的任务就是用拿到的数据进行页面渲染,另外,由于页面的图片数据太多,为了提高性能,我们会使用图片懒加载。本篇我...

891

扫码关注云+社区

领取腾讯云代金券