小程序模板網(wǎng)

swiper組件添加左右箭頭

發(fā)布時間:2018-04-25 10:43 所屬欄目:小程序開發(fā)教程

前言:小程序官方swiper組件并未提供帶左右箭頭功能,但有些時候還是想把左右箭頭添加上,今天連勝老師就給大家分享一下自己的實現(xiàn)方式。

思路很簡單:在swiper組件內(nèi)部添加兩個image組件,綁定點擊事件,動態(tài)改變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. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24039.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢