微信小程序轮播图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与DropDownList 区别分析
Jan 01 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
chrome调试javascript详解
Oct 21 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
移动端界面的适配
Jan 11 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
详解vue-cli@2.x项目迁移日志
Jun 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
PHP 单引号与双引号的区别
2009/11/24 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP防盗链代码实例
2014/08/27 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
python 利用toapi库自动生成api
2020/10/19 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
学校节能减排倡议书
2014/05/16 职场文书
成都人事代理协议书
2014/10/25 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
神秘岛读书笔记
2015/07/01 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android