微信小程序实现轮播图效果


Posted in Javascript onSeptember 07, 2017

微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高。

先来看看效果图:

微信小程序实现轮播图效果

主要用swiper + swiper-item来实现

<view class='swiper'>滑块视图容器</view>

<!--
 indicator-dots='true' 是否显示指示点 默认 false
 indicator-color:指示点颜色
 indicator-active-color:选中的指示点颜色
 autoplay:是否自动切换 默认:false
 interval:自动切换时间间隔
 duration:滑动动画时长
 vertical 是否改成纵向, 默认 false
 -->

<swiper indicator-dots='true' indicator-color='gray' indicator-active-color='green' autoplay='true' interval='5000' duration='500'>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src='{{item}}' class='swiper_image' mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>

一个简单的小案例,轮播图,代码简洁,功能强大。

源码点击下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
javascript数组去重方法分析
Dec 15 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
基于require.js的使用(实例讲解)
Sep 07 #Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 #Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
You might like
MySQL相关说明
2007/01/15 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
资深生产主管自我评价
2013/09/22 职场文书
校领导推荐信
2013/11/01 职场文书
高中美术教学反思
2014/01/19 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
签字仪式主持词
2015/07/03 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电