小程序组件--视图容器组件

本文介绍了小程序中的几种视图容器组件,包括view、swiper及其参数设置,如current、bindchange事件、easing-function的合法值。接着讲解了movable-area和movable-view的参数,如direction、inertia和friction。最后提到了scroll-view滚动视图的使用,强调了在设置垂直滚动时需要指定高度的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(1)view视图容器

    ①hover-class 这个属性后面接string,string是一个类名,在这个组件被点击的时候,加上string这个类,相当于PC端的鼠标移动上去的效果
	②hover-stop-propagation 布尔类型值,用于阻止hover-class的冒泡行为
	③hover-start-time 点击view之后,string延迟多少毫秒出现
	④hover-stay-time 手指松开后string保留时间,单位毫秒

(2)滑块视图容器swiper和滑块swiper-item组件

swiper滑块视图容器放置到左外层,里面的滑动轮播项使用swiper-item滑块组件,此时便可以实现基本轮播功能,但样式需要二次调整在这里插入图片描述
swiper—参数
在这里插入图片描述
在这里插入图片描述
*current为当前所在滑块的 index,取值不能超过滑块组件索引,如果超过,控制台会显示警告
*

在这里插入图片描述
在这里插入图片描述
bindchange函数返回值
在这里插入图片描述
在这里插入图片描述
设置完item-id即滑块组件swiper-item 的标识符后,bindchange事件触发时,便可获取该滑块组件标识符currentItemId
在这里插入图片描述
在这里插入图片描述
easing-function 的合法值
①default默认缓动函数;②linear线性动画;③easeInCubic缓入动画
④easeOutCubic缓出动画;⑤easeInOutCubic缓入缓出动画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(3)可移动视图区域movable-area与可移动视图movable-view

在这里插入图片描述
movable-view参数
在这里插入图片描述
在这里插入图片描述
direction为可移动方向:all所有方向、vertical竖直方向、horizontal水平方向、none不移动。
inertia惯性设置为true时,松开手指后,移动视图movable-view仍然会滑行一段距离
out-of-bounds(极限/限制范围)设为true时,超出仍可移动
friction摩擦系数越大(高速路),惯性滑动距离越短;friction摩擦系数越小(滑冰场),惯性滑动距离越远
scale-min缩小临界值为0.5,即宽高最多缩小一半
scale-max方法临界值为10,即宽高最多放大10倍
scale-value定义初始渲染时的缩放倍数,默认为wxss样式定义大小
在这里插入图片描述
在这里插入图片描述
bindchange参数source
在这里插入图片描述
小结:
①movable-view 必须设置width和height属性,不设置默认为10px
②movable-view 默认为绝对定位,top和left属性为0px

(4)可滚动视图区域scroll-view

在这里插入图片描述
scroll-view为滚动视图,分为水平滚动和垂直滚动。
在这里插入图片描述
注意:滚动视图垂直滚动时,一定要设置高度,否则的话scroll-view不会
生效。滚动视图常用的地方一般都是Item项比较多的界面

注意:横向滚动①white-space:nowrap;②display:inline-block;
注意:scroll-view设置垂直滚动时,必须设置高度
在这里插入图片描述
scroll-top仅仅用于设置竖向滚动条位置,scroll-left仅仅用于设置横向滚动条位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值