小程序模板网

swiper组件添加左右箭头

发布时间:2018-04-25 10:43 所属栏目:小程序开发教程

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

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

WXML:

WXSS:

 

  1. swiper{
  2.  
  3. position:relative;
  4.  
  5. height:300rpx;
  6.  
  7. }
  8.  
  9. swiperimage{
  10.  
  11. display:block;
  12.  
  13. width:100%;
  14.  
  15. height:300rpx;
  16.  
  17. cursor:pointer;
  18.  
  19. }
  20.  
  21. swiper.arrow{
  22.  
  23. width:30rpx;
  24.  
  25. height:46rpx;
  26.  
  27. }
  28.  
  29. swiper.prev{
  30.  
  31. position:absolute;
  32.  
  33. left:0;
  34.  
  35. top:50%;
  36.  
  37. transform:translate(0,-50%);
  38.  
  39. cursor:pointer;
  40.  
  41. }
  42.  
  43. swiper.next{
  44.  
  45. position:absolute;
  46.  
  47. right:0;
  48.  
  49. top:50%;
  50.  
  51. transform:translate(0,-50%);
  52.  
  53. }
  54.  
  55. JS:
  56.  
  57. //index.js
  58.  
  59. Page({
  60.  
  61. data: {
  62.  
  63. swiper: {
  64.  
  65. imgUrls: [
  66.  
  67. '/images/swiper01.jpg',
  68.  
  69. '/images/swiper02.jpg',
  70.  
  71. '/images/swiper03.jpg'
  72.  
  73. ],
  74.  
  75. indicatorDots:true,
  76.  
  77. autoplay:false,
  78.  
  79. interval:5000,
  80.  
  81. duration:1000,
  82.  
  83. current:0,
  84.  
  85. }
  86.  
  87. },
  88.  
  89. prevImg:function(){
  90.  
  91. varswiper =this.data.swiper;
  92.  
  93. varcurrent = swiper.current;
  94.  
  95. swiper.current= current>0? current-1: swiper.imgUrls.length-1;
  96.  
  97. this.setData({
  98.  
  99. swiper: swiper,
  100.  
  101. })
  102.  
  103. },
  104.  
  105. nextImg:function() {
  106.  
  107. varswiper =this.data.swiper;
  108.  
  109. varcurrent = swiper.current;
  110.  
  111. swiper.current= current < (swiper.imgUrls.length-1) ? current +1:0;
  112.  
  113. this.setData({
  114.  
  115. swiper: swiper,
  116.  
  117. })
  118.  
  119. }
  120.  
  121. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24039.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询