微信小程序轮播图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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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中的日期处理方法集锦
2007/01/02 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php简单获取目录列表的方法
2015/03/24 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python ansible服务及剧本编写
2017/12/29 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Django 反向生成url实例详解
2019/07/30 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
学生实习证明范文
2014/09/28 职场文书
五好家庭申报材料
2014/12/20 职场文书
工作失误检讨书
2015/01/26 职场文书
扬州个园导游词
2015/02/06 职场文书
图书馆义工感想
2015/08/07 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers