微信小程序 swiper组件构建轮播图的实例


Posted in Javascript onSeptember 20, 2017

微信小程序 swiper组件构建轮播图的实例

实现效果图:

微信小程序 swiper组件构建轮播图的实例

wxml基础文件:

<view class="classname">
  <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red">
    <swiper-item><image src="/images/1.jpg"></image></swiper-item>
    <swiper-item><image src="/images/2.jpg"></image></swiper-item>
    <swiper-item><image src="/images/3.jpg"></image></swiper-item>
  </swiper> 
</view>
swiper-item仅可放置在组件中,宽高自动设置为100%。 
参数设置: 
autoplay 自动播放导致swiper变化; 
touch 用户划动引起swiper变化; 
indicator-dots true是否显示面板指示点圆圈; 
interval 自动切换时间间隔; 
duration 滑动动画时长; 
更多设置可以看官方文档组件!

wxss样式文件

swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}

app.json文件入口

{
 "pages": [
  "pages/redirect/redirect"  
 ],
 "window": {
  "navigationBarBackgroundColor": "#405f80"
 }
}

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
xml转json的js代码
Aug 28 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
javascript操作css属性
Dec 30 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
node+koa实现数据mock接口的方法
Sep 20 #Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 #Javascript
ES6中Array.includes()函数的用法
Sep 20 #Javascript
微信小程序视图template模板引用的实例详解
Sep 20 #Javascript
highcharts 在angular中的使用示例代码
Sep 20 #Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 #Javascript
You might like
php mysql索引问题
2008/06/07 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Prototype Object对象 学习
2009/07/12 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python变量赋值的秘密分享
2018/04/03 Python
python xpath获取页面注释的方法
2019/01/14 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
军训心得体会
2013/12/31 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
迟到检讨书5000字
2014/01/31 职场文书
青奥会口号
2014/06/12 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python