微信小程序 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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
微信小程序实现授权登录
May 15 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 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不用正则采集速度探究总结
2008/03/24 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python 常用的基础函数
2018/07/10 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
解析Redis Cluster原理
2021/06/21 Redis
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript