【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
业务需求:
3个图片轮番播放,可以左右滑动,点击指示点可以切换图片
index.wxml:
这里使用小程序提供的<swiper>组件
autoplay:自动播放
interval:自动切换时间
duration:滑动动画的时长
current:当前所在的页面
bindchange:current 改变时会触发 change 事件
由于<swiper>组件提供的指示点样式比较单一,另外再自定义指示点的样式
index.wxml :
<scroll-view scroll-y="true">
<swiper catchtap="onSwiperTap" autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{home_pics}}" wx:for-index="index">
<swiper-item>
<view class="ar_coverpath">
<image data-posturl="{{home_pics[index]}}" src="{{home_pics[index]}}" bindtap="previewImage" mode="aspectFill"/>
</view>
</swiper-item>
</block>
</swiper>
<!-- 实现点击选中样式 -->
<view class="dots">
<block wx:for="{{home_pics}}" wx:for-index="index">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
</block>
</view>
</scroll-view>
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就可以进行。
运行:
【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片的更多相关文章
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...
- 微信小程序 swiper轮播 自定义indicator-dots样式
index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange&q ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
随机推荐
- 苹果Itools
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha
- [BZOJ4007][JLOI2015]战争调度(DP+主定理)
第一眼DP,发现不可做,第二眼就只能$O(2^{1024})$暴搜了. 重新审视一下这个DP,f[x][i]表示在x的祖先已经全部染色之后,x的子树中共有i个参战平民的最大贡献. 设k为总结点数,对于 ...
- Activity(活动)生命周期(2)--活动状态
每个活动在其生命周期中最多会有4种状态 一.运行状态 当一个活动位于返回栈的栈顶的时候,这时活动就处于运行状态.系统一般不会回收,因为这会带来非常差的用户体验 二.暂停状态 当一个活动不处于栈顶状态的 ...
- 【OpenJudge9270】【Pku2440】【递推】DNA
DNA [描述] A kind of virus has attacked the X planet, and many lives are infected. After weeks of stud ...
- 在iOS项目中使用截图
最近项目中要求将个人的信息生成一张图片,以名片的方式分享出去.由此就需要使用截图功能.需求如图: 代码如下:
- maven-忽略文件-.gitignore文件
# kdiff3 ignore *.orig # maven ignore target/ # eclipse ignore .settings/ .project .classpath # idea ...
- [HTML/CSS]div显示在object、embed之上~
引言 帮一个朋友弄前端布局,一切都正常,但是嵌入object之后,div总是在object的下面,就上网找了一下解决方案,这里记录一下,好像只对flash有效. 用embed插入一个flash(比如优 ...
- svn: None of the environment variables SVN_EDITOR...问题解决
转:http://blog.163.com/lgh_2002/blog/static/44017526201046111856208/ 问题1: svn: Could not use external ...
- luci框架-LUA的一个web框架使用
转自:http://blog.csdn.net/initphp/article/details/17527639 LUCI 这个在百度上搜索除了一篇我的百度文库 luci 的介绍文章之外,前三页都是些 ...
- PostgreSQL配置文件--日志和错误
6 错误操作和日志 ERROR REPORTING AND LOGGING 6.1 日志写到哪里 Where to Log 6.1.1 log_destination 字符串 默认: log_dest ...