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

小鱼儿 2021-11-27 03:36 471阅读 0赞

## （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_swiper-item]  
**swiper—参数**  
![在这里插入图片描述][20190723171209192.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]  
\*current为当前所在滑块的 index，取值不能超过滑块组件索引，如果超过，控制台会显示警告  
\*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190723171348384.png]  
bindchange函数返回值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190723171447838.png]  
设置完item-id即滑块组件swiper-item 的标识符后，bindchange事件触发时，便可获取该滑块组件标识符currentItemId  
![在这里插入图片描述][20190723171531244.png]  
![在这里插入图片描述][20190723171556955.png]  
easing-function 的合法值  
①default默认缓动函数；②linear线性动画；③easeInCubic缓入动画  
④easeOutCubic缓出动画；⑤easeInOutCubic缓入缓出动画  
![在这里插入图片描述][20190723171636710.png]  
![在这里插入图片描述][20190723171711775.png]  
![在这里插入图片描述][20190723171723557.png]

## （3）可移动视图区域movable-area与可移动视图movable-view ##

![在这里插入图片描述][20190723171806214.png]  
**movable-view参数**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20190723172031489.png]  
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样式定义大小  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][20190723172552547.png]  
bindchange参数source  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 5]  
小结：  
①movable-view 必须设置width和height属性，不设置默认为10px  
②movable-view 默认为绝对定位，top和left属性为0px

## （4）可滚动视图区域scroll-view ##

![在这里插入图片描述][20190723172928848.png]  
scroll-view为滚动视图，分为水平滚动和垂直滚动。  
![在这里插入图片描述][20190723172739707.png]  
**注意：滚动视图垂直滚动时，一定要设置高度，否则的话scroll-view不会  
生效。滚动视图常用的地方一般都是Item项比较多的界面**  
注意：横向滚动①white-space:nowrap;②display:inline-block;  
注意：scroll-view设置垂直滚动时，必须设置高度  
![在这里插入图片描述][20190723172951538.png]  
scroll-top仅仅用于设置竖向滚动条位置，scroll-left仅仅用于设置横向滚动条位置

[swiper_swiper-item]: /images/20211126/5a7339c512b141c7b8cac78506f81570.png
[20190723171209192.png]: /images/20211126/891d892be86c400291e48c424bccecd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: /images/20211126/e29ab5e89c534d60bb327ab85a916fb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: /images/20211126/ba197b662e20482bb474481cf48e8db3.png
[20190723171348384.png]: /images/20211126/d1d4b4d8b8cc40d983cb481f3902204c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: /images/20211126/93c0893f7ea04188a592d2527f1434c4.png
[20190723171447838.png]: /images/20211126/a42f1bb2296a448c8f49a565022a7750.png
[20190723171531244.png]: /images/20211126/1162906d0bc3468c90af33a3cca4ed2f.png
[20190723171556955.png]: /images/20211126/a9665f63fa8341eb8bd5d6725851306e.png
[20190723171636710.png]: /images/20211126/e9e263f9e72d4494b2ae6bd02ed7a51b.png
[20190723171711775.png]: /images/20211126/2bf922d7dc5a481586221d4a72be9dc1.png
[20190723171723557.png]: /images/20211126/cce24f3a7e4f4f8189358f5c8f296807.png
[20190723171806214.png]: /images/20211126/7cef60390bcc4b0caf3bd1e2bbe7158d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3]: /images/20211126/e8c51c428a2f4dc28fceb478860315b2.png
[20190723172031489.png]: /images/20211126/b428bf122b5f45d3920f38e16e11bbb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 4]: /images/20211126/34ece5cd37d8428d9efc182c7ec78b5e.png
[20190723172552547.png]: /images/20211126/3308b8573d16436894c2b7ca24447f5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 5]: /images/20211126/d79688940bdb491fba41c202eead7e90.png
[20190723172928848.png]: /images/20211126/3e377add6a7d48b181eb2fb99b388541.png
[20190723172739707.png]: /images/20211126/4e2c13d662604c5296d2ee19ac71909d.png
[20190723172951538.png]: /images/20211126/25db062013324c8f9a457cd634af6666.png