微信小程序 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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
JS实现放大镜效果
Sep 21 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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 中的类
2006/10/09 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python中hashlib模块用法示例
2017/10/30 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
用Python进行websocket接口测试
2020/10/16 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
群众路线四风自我剖析材料
2014/10/08 职场文书
在人间读书笔记
2015/06/30 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python