微信小程序视图容器(swiper)组件创建轮播图


Posted in Javascript onJune 19, 2020

 本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下

一、视图容器(Swiper)

1、swiper:滑块视图容器

微信官方文档

微信小程序视图容器(swiper)组件创建轮播图

微信小程序视图容器(swiper)组件创建轮播图

二、swiper应用

1、页面逻辑(index.js)

Page({
 data: {
 imgUrls: [
 {
 link: '/pages/index/index',
 url: '/images/001.jpg'
 }, {
 link: '/pages/list/list',
 url: '/images/002.jpg'
 }, {
 link: '/pages/list/list',
 url: '/images/003.jpg'
 }
 ],
 indicatorDots: true, //小点
 indicatorColor: "white",//指示点颜色
 activeColor: "coral",//当前选中的指示点颜色
 autoplay: false, //是否自动轮播
 interval: 3000, //间隔时间
 duration: 3000, //滑动时间
 }

其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

    indicatgorDots 是否出现焦点

    autoplay 是否自动播放

    interval 自动播放间隔时间

    duration 滑动动画时间

2、页面结构(index.wxml)

<!--轮播图-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" 
 indicator-active-color="{{activeColor}}">
 <block wx:for="{{imgUrls}}">
 <swiper-item>
 <navigator url="{{item.link}}" hover-class="navigator-hover">
 <image src="{{item.url}}" class="slide-image" width="355" height="200" />
 </navigator>
 </swiper-item>
 </block>
</swiper>

注意:swiper 千万不要在外面  加上任何标签 例如 <view> 之类的 ,如果加了可能会导致轮播图出不来

3、页面样式(index.wxss)

/*轮播图*/
.slide-image {
 width: 100%;
}

三、小程序效果图

赶快动手实践就可以看到如图所示效果图:

微信小程序视图容器(swiper)组件创建轮播图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JS正则表达式---分组
Jul 18 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jQuery操作css样式
May 15 jQuery
常用的9个JavaScript图表库详解
Dec 19 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
JavaScript实现星级评价效果
May 17 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
angular实现input输入监听的示例
Aug 31 #Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 #Javascript
Angular2中监听数据更新的方法
Aug 31 #Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
php数据库抽象层 PDO
2011/05/07 PHP
php数组编码转换示例详解
2014/03/11 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
详解JavaScript函数
2015/12/01 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
python封装对象实现时间效果
2020/04/23 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Django 路由控制的实现
2019/07/17 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
上课睡觉检讨书
2014/01/28 职场文书
战略合作意向书范本
2014/04/01 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
运动会表扬稿范文
2015/05/05 职场文书
会议室管理制度范本
2015/08/06 职场文书
创业计划书之书店
2019/09/10 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript