微信小程序 轮播图swiper详解及实例(源码下载)


Posted in Javascript onJanuary 11, 2017

微信小程序 swiper 轮播图

前言:

1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口。

2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示。要把indicator-dots属性直接删掉。

下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等。。。。

首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码如下:

<view class="swiper-container">
 <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
  <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item>
    <image src="{{item.picUrl}}" class="img"></image>
   </swiper-item>
  </block>
 </swiper>
 
 <view class="dots">
  <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
  </block>
 </view>
</view>

 然后是wxss代码:

.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 height: 300rpx;
}
.swiper-container .swiper .img{
 width: 100%;
 height: 100%;
}
.swiper-container .dots{
 position: absolute;
 left: 0;
 right: 0;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 margin: 0 8rpx;
 width: 14rpx;
 height: 14rpx;
 background: #fff;
 border-radius: 8rpx;
 transition: all .6s;
}
.swiper-container .dots .dot.active{
 width: 24rpx;
 background: #f80;
}

 再对swiper的bindchange属性绑定对应的事件:

Page({
data: {
  slider: [
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},
  ......
  ],
  swiperCurrent: 0,
},
swiperChange: function(e){
  this.setData({
    swiperCurrent: e.detail.current
  })
}
})

效果预览:

微信小程序 轮播图swiper详解及实例(源码下载)

项目地址:http://xiazai.3water.com/201701/yuanma/wx_qqmusic-master(3water.com).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
js编写简易的计算器
Jul 29 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 #Javascript
web打印小结
Jan 11 #Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
AngularJS中的缓存使用
Jan 11 #Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
You might like
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python selenium自动化测试模型图解
2020/04/15 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python3获取cookie常用三种方案
2020/10/05 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
采购员岗位职责
2013/11/15 职场文书
幼儿园家长评语
2014/02/10 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
中秋节感想
2015/08/10 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android