微信小程序 轮播图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 相关文章推荐
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JS实现点击Radio动态更新table数据
Jul 18 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Bootstrap table表格初始化表格数据的方法
Jul 25 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中PDO基础教程 入门级
2011/09/04 PHP
php异常处理使用示例
2014/02/25 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
vue实现登录功能
2020/12/31 Vue.js
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python3中zip()函数使用详解
2018/06/29 Python
浅析Python 责任链设计模式
2020/09/11 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
高级销售求职信
2014/02/21 职场文书
大学军训感言400字
2014/03/11 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Elasticsearch 配置详解
2022/04/19 Java/Android