微信小程序 轮播图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 浏览器检测代码精简版
Mar 04 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
JavaScript window.location对象
Nov 14 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
Vue2.0用户权限控制解决方案
Nov 29 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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中的时间处理
2006/10/09 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
详解Python发送邮件实例
2016/01/10 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python属于软件吗
2020/06/18 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
政协委员个人总结
2015/03/03 职场文书
感恩节寄语2015
2015/03/24 职场文书
政审证明材料
2015/06/19 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
爱国之歌(8首)
2019/09/29 职场文书