53/666 小程序视图容器

image

这是666计划的53篇笔记

体验代码：

在开发者工具中预览效果

组件

所有组件参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/

image image image

组件的小程序官方文档入口： https://developers.weixin.qq.com/miniprogram/dev/component/

view组件

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/view.html

属性名	类型	默认值	说明	最低版本
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

关于hover-class示例代码：

index.wxss:

/** view **/
.view-parent-container {
    width: 300rpx;
    height: 300rpx;
    background: yellowgreen;
}
.hover-parent-container {
    background: #fff;
}
.view-container {
    width: 200rpx;
    height: 200rpx;
    background: chocolate;
    /* transition: all .5s; */
}
.hover-container {
    background: rgba(0,0,0,0.7)
}

index.wxml:

<view class="section">
    <view>view组件</view>
    <view class="view-parent-container" hover-class="hover-parent-container">
    parent
        <view class="view-container" 
            hover-class="hover-container" 
            hover-stop-propagation='true'
            hover-start-time="500"
            hover-stay-time="300">
            child
        </view>
    </view>
</view>

默认页面效果：

image

加上hover-stop-propagation='true'效果：

只有自己变， 不影响其他

image

没有hover-stop-propagation效果：

所有的背景都跟着变

image

scroll-view 横向 竖向滚动

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

scrollview.wxml:

<!--scorllview.wxml-->
<view>scroll-view组件</view>
<view class="section">
    <view class="section__title">竖向滚动</view>
    <scroll-view style="height: 200px;" 
        scroll-y
        bindscrolltoupper="upper" 
        bindscrolltolower="lower" 
        bindscroll="scroll" 
        scroll-into-view="{{toView}}"
        scroll-top="{{scrollTop}}" 
        enable-back-to-top="true" 
        scroll-with-animation="true">

        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>

    <view class="btn-area">
        <button size="mini" bindtap="tap">click me to scroll into view </button>
        <button size="mini" bindtap="tapMove">click me to scroll</button>
    </view>
</view>
<view class="section">
    <view class="section__title">横向滚动</view>
    <scroll-view class="scroll-view_H" 
    scroll-x >
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red" class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
    </scroll-view>
</view>

scrollview.wxss:

/** scroll-view **/
.scroll-view-item {
    width: 600rpx;
    margin: 0 auto;
    height: 200px;
}
.scroll-view-item.bc_green,
.scroll-view-item_H.bc_green {
    background: green;
}
.scroll-view-item.bc_red,
.scroll-view-item_H.bc_red {
    background: red;
}
.scroll-view-item.bc_yellow,
.scroll-view-item_H.bc_yellow {
    background: yellow;
}
.scroll-view-item.bc_blue,
.scroll-view-item_H.bc_blue {
    background: blue;
}
.scroll-view_H {
    height: 200px;
    margin: 0 auto;
    white-space: nowrap;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}

页面效果：

image

swiper 滑块视图容器

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

示例代码：

在开发者工具中预览效果

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
indicator-active-color	Color	#000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String	""	当前所在滑块的 item-id ，不能与 current 被同时指定	1.9.0
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
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
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上

movable-view组件： 可拖拽移动

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

示例代码：

在开发者工具中预览效果

属性名	类型	默认值	说明	最低版本
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled	Boolean	false	是否禁用	1.9.90
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	1.9.90
scale-min	Number	0.5	定义缩放倍数最小值	1.9.90
scale-max	Number	10	定义缩放倍数最大值	1.9.90
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	1.9.90
animation	Boolean	true	是否使用动画	2.1.0
bindchange	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）	1.9.90
bindscale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回