公司新闻 行业动态 技术分享

小程序 swiper 左右箭头/前进后退/方向控制

发布日期: 2018-03-18浏览次数: 5926

图片轮播是很经常用到的效果,小程度里默认提供了swiper组件,不过并没有左右切换的按钮/箭头,这里探讨一下如何实现该功能。

一、静态数据

先开发预览版本,数据全部用的js设定好的本地数据,实现方式如下:

  1. <view class=swiper-car>
  2. <swiper current={{carIndex}} indicator-dots="{{swiperCar.indicatorDots}}" autoplay="{{swiperCar.autoplay}}" interval="{{swiperCar.interval}}" duration="{{swiperCar.duration}}">
  3. <block wx:for="{{carImgs}}" wx:key="cidx">
  4. <swiper-item>
  5. <image src="{{item}}" class="slide-image" />
  6. </view>
  7. </swiper-item>
  8. </block>
  9. </swiper>
  10. <button class=swiper-left bindtap="bindPrev">
  11. <image src=../../images/swiper-prev.png mode=widthFix></image>
  12. </button>
  13. <button class=swiper-right bindtap="bindNext">
  14. <image src=../../images/swiper-next.png mode=widthFix></image>
  15. </button>
  16. </view>

wxss

  1. .swiper-car {
  2. height: 430rpx;
  3. padding: 0 82rpx;
  4. position: relative;
  5. }
  6. .swiper-car swiper {
  7. height: 450rpx;
  8. }
  9. .swiper-car swiper-item {
  10. font-size: 11pt;
  11. }
  12. .swiper-car swiper-item image {
  13. height: 300rpx;
  14. }
  15. .swiper-car button {
  16. width: 35rpx;
  17. height: 65rpx;
  18. padding: 0;
  19. position: absolute;
  20. top: 50%;
  21. margin-top: -30rpx;
  22. border: 0;
  23. background: transparent;
  24. }
  25. .swiper-car button::after {
  26. border: 0;
  27. }
  28. .swiper-car button image {
  29. width: 35rpx;
  30. }
  31. .swiper-car .swiper-left {
  32. left: 25rpx;
  33. text-align: left;
  34. }
  35. .swiper-car .swiper-right {
  36. right: 25rpx;
  37. }

实现方式跟网页端的轮播类似。

二、动态数据

上一个例子数据是直接在js里给定,很奇怪的是更换成远程获取的数据,setData后发现图片竟然无法显示了,后面发现是swiper不能在嵌套里的关系(?),移出view就可以了,但是之前的样式无论如何都不起作用了。
刚好swiper上面有个heading,就将左右箭头放在heading里,再调整下位置

  1. .heading {
  2. margin-top: 40rpx;
  3. padding: 15rpx;
  4. background: #fff;
  5. font-size: 11pt;
  6. font-weight: bold;
  7. color: #000;
  8. position: relative;
  9. }
  10. .heading .arrow {
  11. width: 30rpx;
  12. height: 59rpx;
  13. z-index: 99;
  14. padding: 80px 20rpx;
  15. }
  16. .heading .swiper-left {
  17. position: absolute;
  18. left: 0;
  19. top: 290rpx;
  20. transform: translate(0, -50%);
  21. cursor: pointer;
  22. }
  23. .heading .swiper-right {
  24. position: absolute;
  25. right: 0;
  26. top: 290rpx;
  27. transform: translate(0, -50%);
  28. }

扫一扫关注我们

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门软件园三期A02

网站地图