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


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 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
PHP 反向排序和随机排序代码
2010/06/30 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
网上祭先烈心得体会
2014/09/01 职场文书