A-A+

微信小程序轮播图添加链接

2019年06月03日 前端 暂无评论 阅读 252 次
守财鹿邀请码

轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。

Swiper是滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。

WXML部分:

  1. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" indicator-color='#fff' indicator-active-color='#999'  duration="{{duration}}" class='ibanner'>
  2.   <swiper-item wx:for="{{imgUrls}}">
  3.     <navigator url='{{item.link}}' open-type='switchTab'>
  4.      <image src="{{item.url}}" class="slide-image" mode="widthFix" />
  5.     </navigator>
  6.   </swiper-item>
  7.  </swiper>

这里说明一下,我在做的时候开始没有添加 open-type 属性 导致后面点击没有任何反应,后面也是查询了好一会,我是个不太爱看手册的人 ,~囧~,后面加上就可以了:

open-type有几个参数:

  1. switchTab: 切换tab,基本和下面的底部导航功能一样,链接地址需要在app.json的pages里面注册。
  2. redirect: 在当前页面打开,设置这个参数的时候链接后面可以带参数。
  3. navigate: 这个参数基本是和target="miniProgram" 配合使用的, 后面跟上app-id='' 打开绑定的另外的小程序。

JS部分:

  1. Page({
  2.   data: {
  3.     imgUrls: [
  4.       {
  5.         link:'../me/me',
  6.         url: 'http://twbweb.com/xcx/images/banner.jpg',
  7.       },
  8.       {
  9.         link: '../cart/cart',
  10.         url: 'http://twbweb.com/xcx/images/banner.jpg',
  11.       },
  12.       {
  13.         link: '../cate/cate',
  14.         url: 'http://twbweb.com/xcx/images/banner.jpg',
  15.       }
  16.     ],
  17.     indicatorDots: true,
  18.     autoplay: true,
  19.     interval: 5000,
  20.     duration: 1000
  21.   }
  22. })

介绍一下参数的意思:

indicator-dots :Boolean false 是否显示面板指示点

autoplay: Boolean false 是否自动切换

interval : Number 5000 自动切换时间间隔

duration : Number 500 滑动动画时长

 

最后加一点css 样式:

  1. .ibanner { height: 475rpx;}
  2. .slide-image {width: 100%;}

好了 ,到这里就结束了,基本上图片点击的话就可以切换到其他页面的,我也看到有很多朋友用的是同事 绑定点击事件,然后通过索引的方法来打开相应的链接,也是可以的,不过我觉得略麻烦了一点。

打赏

给我留言

Copyright © WEB小工匠 保留所有权利.   渝ICP备15008469号

渝公网安备 50023602000173号

用户登录

分享到: