微信小程序 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 相关文章推荐
javascript 打印内容方法小结
Nov 04 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js制作支付倒计时页面
Oct 21 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 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实现补齐关闭的HTML标签
2016/03/22 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python远程登录代码
2008/04/29 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python列表(List)知识点总结
2019/02/18 Python
python实现维吉尼亚加密法
2019/03/20 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
物业工作计划书
2014/01/10 职场文书
施工安全责任书
2014/04/14 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
昆虫记读书笔记
2015/06/26 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
nginx请求限制配置方法
2021/07/09 Servers