小程序 swiper轮播页(点击事件)

原创 2018年04月16日 23:42:49

Swiper轮播页组件
属性
indicator-dots:是否现实面板知识点(小店)
indicator-color:知识点颜色
Indicator-active-color:当前选中的指试点颜色
autoplay:是否自动播放
current:当前所在滑块的index
Current-item-id:当前所在滑块的item-id不能与current同时制定
interval:自动切换时间间隔
duration:滑动动画时常
bindchange:current改变时会触发change事件e.datall={current.current}
item-id:组件内容
wxxml代码

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image"bindtap="swipclick" />
      </swiper-item>
    </block>
  </swiper>
备注:current="{{swiperCurrent}}当前index bindchange="swiperChange”:current变化时会触发我们可以在这里面得到当前index标示   <block wx:for="{{imgUrls}}">循环,imgUrls是定义的图片数组。 bindtap="swipclick”图片点击事件

wxss代码

/*轮播页*/
.swiper {
  height: 400rpx;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
}
.slide-image{
   height: 100%;
  width: 100%;
}

index.js代码

Page({

  data: {
    //轮播页数组
    imgUrls: [    'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    //是否显示指适点
    indicatorDots: true,
    //是否轮播
    autoplay: true,
    //
    interval: 5000,
    duration: 1000,
    inputShowed:false,
    inputVal:"",
    //轮播页当前index
    swiperCurrent:0,

},
//轮播图的切换事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  //轮播图点击事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent)
  },

 });
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30211165/article/details/79968609

微信小程序swiper实现轮播图,可触发点击事件

实现微信小程序轮换图切换,点击获取图片url,获取当前位置 1、index.js Page({       data: {         autoplay: true,         d...
  • oYanXiangFei
  • oYanXiangFei
  • 2016-12-30 15:26:58
  • 12177

Swiper 简单使用

什么是swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和h...
  • laike1355
  • laike1355
  • 2016-03-17 11:44:44
  • 2913

Swiper使用说明

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps...
  • u012217533
  • u012217533
  • 2015-06-02 21:07:20
  • 5481

Swiper轮播显示Demo

“` index.wxml index.wxss /index.wxss/ .userinfo { d...
  • qq_25396633
  • qq_25396633
  • 2017-01-15 11:31:10
  • 393

微信小程序 轮播图 swiper图片组件

照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了...
  • qq_31383345
  • qq_31383345
  • 2016-10-13 21:38:47
  • 39881

Swiper说明及API手册说明

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下。能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api...
  • playboyanta123
  • playboyanta123
  • 2014-12-08 14:53:57
  • 38868

js 移动端 tab切换栏下使用多个Swiper

引用了bootstrap的tab切换栏和Swiper相结合,需要再每个tab栏下使用一个swiper滚动,每个swiper都要经过初始化,问题就是永远只有第一个tab栏的swiper生效,第二,三个无...
  • yjwu5353
  • yjwu5353
  • 2017-04-13 19:32:38
  • 2329

[微信小程序]swiper组件轮播图宽高自适应

对微信小程序有兴趣的可以关注我或者加入我的微信小程序开发交流qq群(173683895)相互交流学习。 禁止闲扯和广告。我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适...
  • qq_35713752
  • qq_35713752
  • 2017-12-06 14:12:47
  • 5575

微信小程序-swiper轮播图获取index

1.获取之后存入stroage  stroage的get/set使用就不多介绍了,只说一下思想,利用轮播图变化绑定事件,获取e.detail.current(即为index)2.通过url传值直接上图...
  • liuyahui_0126
  • liuyahui_0126
  • 2018-02-11 18:51:54
  • 102

bootstrap小笔记 各种组件(轮播图/模态框/菜单监听....)

Bootstrap----部分组件类名的应用 页头:  page-header 巨幕: jumbotron  ( 展示一个网页关键区域) 缩略图: thumbnail(极小的)  (可以做出九宫格...
  • qq_32188101
  • qq_32188101
  • 2016-10-23 19:36:34
  • 627
收藏助手
不良信息举报
您举报文章:小程序 swiper轮播页(点击事件)
举报原因:
原因补充:

(最多只允许输入30个字)