一个网站建设爱好者,技术交流,相互学习
当前位置:首页>>程序猿
微信小程序轮播图添加链接
发布时间:2021-11-16 09:43:27 栏目:程序猿 阅读量:3260 作者:webcms

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

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

WXML部分:

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

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

open-type有几个参数:

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

JS部分:

Page({
  data: {
    imgUrls: [
      {
        link:'../me/me',
        url: 'http://twbweb.com/xcx/images/banner.jpg',
      },
      {
        link: '../cart/cart',
        url: 'http://twbweb.com/xcx/images/banner.jpg',
      },
      {
        link: '../cate/cate',
        url: 'http://twbweb.com/xcx/images/banner.jpg',
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})

介绍一下参数的意思:

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

autoplay: Boolean false 是否自动切换

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

 

duration : Number 500 滑动动画时长

最后加一点css 样式:

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

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

 

 

 


评论:

IT视频教程
Copyright © web小工匠 保留所有权利. 渝ICP备15008469号 网站地图