微信小程序轮播图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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
python实现随机漫步方法和原理
2019/06/10 Python
python找出因数与质因数的方法
2019/07/25 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
pandas中ix的使用详细讲解
2020/03/09 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Python3读写ini配置文件的示例
2020/11/06 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
优秀老员工获奖感言
2014/02/15 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Redis RDB技术底层原理详解
2021/09/04 Redis
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL