微信小程序轮播图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 创建对象(常见的几种方法)
Nov 03 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
VUE 动态组件的应用案例分析
Dec 02 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中操作Excel实例代码
2010/04/29 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
在Vue中使用echarts的方法
2018/02/05 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python对切片命名的实现方法
2018/10/16 Python
Django实现跨域的2种方法
2019/07/31 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
初学者学习Python好还是Java好
2020/05/26 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
应聘教师推荐信
2013/10/31 职场文书
社会保险接收函
2014/01/12 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2014年环保局工作总结
2014/12/11 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
力克胡哲观后感
2015/06/10 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫