微信小程序轮播图swiper代码详解


Posted in Javascript onDecember 01, 2020

微信小程序自定义swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

微信小程序轮播图swiper代码详解
微信小程序轮播图swiper代码详解
微信小程序轮播图swiper代码详解

先在index.wxml中写

style=“background:{{item}}” 报错不要管,不影响页面布局

<view class="container">
 <swiper class="swiper1" 
 indicator-dots="{{indicatorDots}}" 是否显示面板指示点
 autoplay="{{autoplay}}" 是否自动切换
 interval="{{interval}}" 自动切换时间间隔
 duration="{{duration}}" 滑动动画时长
 circular="{{circular}}" 是否采用衔接滑动
 indicator-active-color="#ff0099" 选中指示点颜色
 >
 <block wx:for="{{background}}" wx:key="index"> 循环遍历数据
  <swiper-item>
  <view class="swiper-item" style="background:{{item}}"></view>
  </swiper-item>
 </block>
 </swiper>
</view>

再在index.js中写

Page({
 data: {
  background: ["red", "pink","yellowgreen"],
  indicatorDots: true,
  vertical: false,
  autoplay: true,
  interval: 2000,
  duration: 500,
  circular:true
 }
})

最后在index.wxss中写

.swiper1{
width: 100%;
height: 200px;
}
.swiper-item{
 width: 100%;
 height: 100%;
}

记住:

图片跟背景颜色思路一样

到此这篇关于微信小程序轮播图swiper代码的文章就介绍到这了,更多相关微信小程序轮播图swiper代码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中获取事件对象的方法小结
Mar 13 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
小程序实现长按保存图片的方法
Dec 31 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JavaScript中的类型检查
Feb 03 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 #Javascript
layui使用及简单的三级联动实现教程
Dec 01 #Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
编写v-for循环的技巧汇总
Dec 01 #Javascript
jquery实现拖拽添加元素功能
Dec 01 #jQuery
创建与框架无关的JavaScript插件
Dec 01 #Javascript
jQuery实现可以扩展的日历
Dec 01 #jQuery
You might like
php接口与接口引用的深入解析
2013/08/09 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js Function类型
2011/12/04 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
大学四年职业生涯规划书范文
2014/01/02 职场文书
医院辞职信范文
2014/01/17 职场文书
个人委托书范本
2014/09/13 职场文书
建国大业电影观后感
2015/06/01 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
React实现动效弹窗组件
2021/06/21 Javascript
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server