前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发之视图容器swiper

微信小程序开发之视图容器swiper

作者头像
睿儿网络郝刚
发布2020-09-08 11:02:52
7950
发布2020-09-08 11:02:52
举报

视图容器swiper是微信小程序提供的内置图片轮播组件,用它可以实现广告横向、纵向切换播放,滑动导航条等各种效果。

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

官网说明地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

经过测试发现,图片地址可以外部引用也可以写本地地址,支持GIF,swiper插件和网页用的一样,都会自动把图片拉到固定大小,所以做图的时候需要按需求大小制作。要不然会变形,还有就是SWIPER的官方文档属性需要写在wxml文件里面,就像我自已增加的 indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#ff3300" 一样。

效果展示

下面是官方对swiper参数的说明:

swiper

基础库 1.0.0 开始支持,低版本需做兼容处理。

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

属性

类型

默认值

必填

说明

最低版本

indicator-dots

boolean

false

是否显示面板指示点

1.0.0

indicator-color

color

rgba(0, 0, 0, .3)

指示点颜色

1.1.0

indicator-active-color

color

#000000

当前选中的指示点颜色

1.1.0

autoplay

boolean

false

是否自动切换

1.0.0

current

number

0

当前所在滑块的 index

1.0.0

interval

number

5000

自动切换时间间隔

1.0.0

duration

number

500

滑动动画时长

1.0.0

circular

boolean

false

是否采用衔接滑动

1.0.0

vertical

boolean

false

滑动方向是否为纵向

1.0.0

previous-margin

string

"0px"

前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值

1.9.0

next-margin

string

"0px"

后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值

1.9.0

display-multiple-items

number

1

同时显示的滑块数量

1.9.0

skip-hidden-item-layout

boolean

false

是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息

1.9.0

easing-function

string

"default"

指定 swiper 切换缓动动画类型

2.6.5

bindchange

eventhandle

current 改变时会触发 change 事件,event.detail = {current, source}

1.0.0

bindtransition

eventhandle

swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}

2.4.3

bindanimationfinish

eventhandle

动画结束时会触发 animationfinish 事件,event.detail 同上

1.9.0

easing-function 的合法值

说明

最低版本

default

默认缓动函数

linear

线性动画

easeInCubic

缓入动画

easeOutCubic

缓出动画

easeInOutCubic

缓入缓出动画

change事件 source 返回值

从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:

  1. autoplay 自动播放导致swiper变化;
  2. touch 用户划动引起swiper变化;
  3. 其它原因将用空字符串表示。
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-08-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 睿儿网络技术公社 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • swiper
    • change事件 source 返回值
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档