微信小程序轮播图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 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
基于jquery实现五星好评
Nov 18 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
django session完成状态保持的方法
2018/11/27 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
三年级科学教学反思
2014/01/29 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
优秀护士事迹材料
2014/12/25 职场文书
母亲节感言
2015/08/03 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
MySQL 服务和数据库管理
2021/11/11 MySQL