《微信小程序开发从入门到实战》学习九十二

发布时间:2024年01月24日

7.1 视图容器组件

7.1.2 scroll-view组件

设置滚动条位置时默认是没有动画过渡的,scroll-with-animation设置为true即可开启动画过渡效果。

enable-back-to-top设置为true,用户单击标题栏可以让scroll-view中的内容快速地回到最顶部。iOS单击标题栏即可,Android需要双击标题栏。

bindscrolltoupper、bindscrolltolower和bindscroll可以绑定事件监听函数。

使用scroll-view组件需要注意:

1、基础库2.4.0版本以下不支持嵌套textarea、map、canvas、video组件。

2、在scroll-view中滚动无法触发onPullDownRefresh

7.1.3?swiper与swiper-item组件

swiper是滑块容器组件,需要与swiper-item组件结合使用。swiper组件内部只能放swiper-item组件,在swiper-item组件中才可放其他内容。

每个swiper-item代表一个滑块的内容,同一时刻swiper组件只显示一个swiper-item的内容,左右滑动可以切换显示不同的swiper-item。

swiper组件的属性如下:

属性类型默认值说明最低版本
indicator-dotsboolenfalse是否显示面板指示点1.0.0
indicator-colorcolorrgba(0,0,0,0.3)指示点颜色1.1.0
indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
currentnumber0当前滑块所在的index1.0.0
autoplaybooleanfalse是否自动切换1.0.0
intervalnumber5000自动切换时间间隔1.0.0
durationnumber500滑动动画时长1.0.0
easing-functionstringdefault

指定swiper切换动画类型,可选值如下:

default:默认动画

linear:线性动画

easeInCubic:缓入动画

easeOutCubic:缓出动画

easeInOutCubic:缓入缓出动画

2.6.0
circularbooleanfalse是否采用衔接滑动1.0.0
verticalbooleanfalse滑动方向是否为纵向1.0.0
previous-marginstring0px前边距,可用于露出前一项的一小部分,接受px,rpx1.9.0
next-marginstring0px后边距,可用于露出后一项的一小部分,接受px,rpx1.9.0
display-multiple-itemnumber1同时显示的滑块数量1.9.0
bindchangeeventhandle

current改变时会触发chage事件,event.detail={current.source},source表示导致变更的原因,可能的值如下:

autoplay:自动播放

touch:用户滑动

空字符串:其他原因

1.0.0
bindtransitioneventhandleswiper-item的位置发生改变时会触发transition事件event.detail={dx:dx,dy:dy}2.4.3
bindanimationfinisheventhandle动画结束时会触发animationfinish事件,event.detail同上1.9.0

文章来源:https://blog.csdn.net/xy2937131682/article/details/135819631
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。