博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片...
阅读量:5256 次
发布时间:2019-06-14

本文共 909 字,大约阅读时间需要 3 分钟。

业务需求:

3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 

index.wxml:

这里使用小程序提供的<swiper>组件

autoplay:自动播放
interval:自动切换时间
duration:滑动动画的时长
current:当前所在的页面
bindchange:current 改变时会触发 change 事件
由于<swiper>组件提供的指示点样式比较单一,另外再自定义指示点的样式

 

index.wxml :

{
{index+1}}

 

index.js:

data: {    swiperCurrent: 0  },    //轮播图的切换事件    swiperChange: function (e) {     console.log(e);     this.setData({      swiperCurrent: e.detail.current   //获取当前轮播图片的下标    })  },  //点击指示点切换    chuangEvent: function (e) {    this.setData({      swiperCurrent: e.currentTarget.id    })  },//获取图片在onload就可以进行。

 

运行:

 

转载于:https://www.cnblogs.com/xuzhengzong/p/8056262.html

你可能感兴趣的文章
MetaWeblog API Test
查看>>
反弹SHELL
查看>>
关闭Chrome浏览器的自动更新和升级提示
查看>>
移动、尺寸改变
查看>>
poj2255Tree Recovery【二叉树重构】
查看>>
tcpcopy 流量复制工具
查看>>
vue和react的区别
查看>>
第十一次作业
查看>>
负载均衡策略
查看>>
微信智能开放平台
查看>>
ArcGIS Engine 中的绘制与编辑
查看>>
Oracle--通配符、Escape转义字符、模糊查询语句
查看>>
子网划分讲解及练习(一)
查看>>
c# 文件笔记
查看>>
第一页 - 工具的使用(webstorm)
查看>>
Linux 进程资源用量监控和按用户设置进程限制
查看>>
IE浏览器整页截屏程序(二)
查看>>
D3.js 之 d3-shap 简介(转)
查看>>
制作满天星空
查看>>
类和结构
查看>>