(四)微信小程序之实现轮番效果(swiper)
来源:互联网 发布:qq摄像头监控软件 编辑:程序博客网 时间:2024/05/22 03:48
轮番效果在很多的网站主页或者手机应用端都能看到,在微信小程序中使用swiper组件来实现图片轮番,今天的小例子效果如下:
为了方便演示我将动画切换的间隔调整为3s,现实项目中一般为5s,具体看项目需求而定。
实现图片轮番使用swiper滑块视图容器组件,页面结构文件代码如下:
<!--mySwiper.wxml--><view class="container"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block> </swiper></view>忽略最外层的父容器view和组件属性,页面文件结构简化如下:
<swiper> <block wx:for="{{imgUrls}}"> <swiper-item> <image/> </swiper-item> </block> </swiper>以上代码看出,整个轮番图的代码是有一个swiper组件,包含着多个swiper-item组件形成的,其中swiper-item中放置的是image。
<block wx:for="{{imgUrls}}">的作用是控制属性绑定一个imgUrls数组,使用数组中各项的数据重复渲染该组件。block标签并不会在页面中渲染,如需了解更多可进入官方文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=201715 中了解更多关于 block wx:for 的内容。
代码中看到 的 {{}} 符号是Mustache 语法,意思是将双大括号中的变量名中的数据取出,实现数据绑定,这些变量在同名文件的.js文件中data对象中声明,如下:
// mySwiper.jsPage({ data:{ imgUrls: [ '/asserts/img/001.jpg', '/asserts/img/002.jpg', '/asserts/img/003.jpg' ], indicatorDots: true, autoplay: true, interval: 3000, duration: 1000 }, onLoad:function(options){ // 生命周期函数--监听页面加载 }}
其中,
indicator-dots: 是否显示面板指示点,默认为false;
autoplay:是否自动切换,默认为false;
interval:自动切换时间间隔,默认5000ms;
duration: 滑动动画时长,默认为1000ms;
需要注意的是swiper组件需要给他一个宽度,不然swiper不显示,这里给了一个具体的宽高,并设置居中显示:
/* pages/mySwiper/mySwiper.wxss */swiper{ margin: 0 auto; height: 200px; width: 300px;}
详细swiper属性说明如下:
1 0
- (四)微信小程序之实现轮番效果(swiper)
- jquery实现图片轮番效果(一)
- jquery实现图片轮番效果(二)
- android 轮番图——viewpager实现(自动轮番,手动轮番);bug汇总以及解决
- 微信小程序之swiper制作tab切换效果
- 微信小程序学习(三)之swiper组件
- viewpager实现图片轮番(本地图片)
- 微信小程序之swiper轮播图
- 微信小程序入门之swiper
- 微信小程序----组件之swiper
- 微信小程序之swiper轮播图
- 微信小程序实现tab和swiper切换结合效果viewpage+tab效果
- 微信小程序把玩(十)swiper组件
- 微信小程序(轮播图 swiper组件)
- 微信小程序8-swiper(滑动面板)
- 学习微信小程序--组件(swiper)
- 微信小程序组件(二)swiper
- js实现图片轮番效果,原生代码
- C++:复合类型
- NLPIR 词性标注的兼容设置
- Spring API 下载方法
- C++int转字符串
- Hellow World
- (四)微信小程序之实现轮番效果(swiper)
- 北大词性标注集
- 自旋锁
- 引用变量
- MyBatis延迟加载,分层加载和局部延迟加载
- 去掉Chrome自动填充表单浅黄色背景色
- 四道蓝桥杯基础题
- [18]CSS3 变形效果(下)
- SQL——select汇总