微信小程序视图容器(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 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
前端性能优化及技巧
May 06 Javascript
setTimeout学习小结
Feb 08 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
浅谈webpack 自动刷新与解析
Apr 09 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
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php给图片加文字水印
2015/07/31 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python中property和setter装饰器用法
2019/12/19 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
计算机专业自荐信范文
2014/05/28 职场文书
大学军训决心书
2015/02/05 职场文书
2015年档案室工作总结
2015/05/23 职场文书
python之基数排序的实现
2021/07/26 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫