携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情
视图容器的使用
1 view
view标签同Html中的div，用于布局，无具体意义，是最常用的标签之一。属性有：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持） |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
示例：
<template>
<view class="base" hover-class="box" :hover-start-time="300" :hover-stay-time="4000">
</view>
</template>
<style>
.base {
width: 200px;
height: 200px;
}
.box {
border: 1px solid red;
}
</style>
2 scroll-view
scroll-view是可滚动视图区域。用于区域滚动，可实现横向或纵向区域滚动，使用纵向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 | |
| scroll-y | Boolean | false | 允许纵向滚动 | |
| upper-threshold | Number/String | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 | |
| lower-threshold | Number/String | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 | |
| scroll-top | Number/String | 设置竖向滚动条位置 | ||
| scroll-left | Number/String | 设置横向滚动条位置 | ||
| scroll-into-view | String | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | ||
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 | |
| enable-back-to-top | Boolean | false | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | app-nvue，微信小程序 |
| show-scrollbar | Boolean | false | 控制是否出现滚动条 | App-nvue 2.1.5+ |
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-threshold | Number | 45 | 设置自定义下拉刷新阈值 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-default-style | String | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-background | String | "#FFF" | 设置自定义下拉刷新区域背景颜色 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
| enable-flex | Boolean | false | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 | 微信小程序 2.7.3 |
| scroll-anchoring | Boolean | false | 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 | 微信小程序 2.8.2 |
| @scrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | ||
| @scrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | ||
| @scroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | ||
| @refresherpulling | EventHandle | 自定义下拉刷新控件被下拉 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ | |
| @refresherrefresh | EventHandle | 自定义下拉刷新被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ | |
| @refresherrestore | EventHandle | 自定义下拉刷新被复位 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ | |
| @refresherabort | EventHandle | 自定义下拉刷新被中止 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
示例：
<template>
<view>
<scroll-view class="scroll-y" scroll-y="true" :show-scrollbar="true" @scrolltoupper="top"
@scrolltolower="bottom" scroll-top="100">
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
<view>新闻 </view>
</scroll-view>
<scroll-view class="scroll-x" scroll-x="true" :show-scrollbar="true" @scrolltoupper="top"
@scrolltolower="bottom">
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
<view class="inline">新闻 </view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
top() {
console.log('距离顶部有50px了');
},
bottom() {
console.log('距离底部有50px了');
}
}
}
</script>
<style>
.scroll-y {
height: 300rpx;
width: 740rpx;
border: 1px solid red;
}
.scroll-x {
margin-top: 100rpx;
height: 300rpx;
width: 740rpx;
border: 1px solid blue;
white-space: nowrap;
}
.inline {
display: inline;
}
</style>
3 swiper
swiper滑块视图容器，一般用于左右滑动或上下滑动，比如banner轮播图或列表轮换。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
| active-class | String | swiper-item 可见时的 class | 支付宝小程序 | |
| changing-class | String | acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class | 支付宝小程序 | |
| Class | Alipay applet | |||
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在滑块的 index | |
| current-item-id | String | 当前所在滑块的 item-id ，不能与 current 被同时指定 | 支付宝小程序不支持 | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序、飞书小程序不支持 |
| next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序、飞书小程序不支持 |
| acceleration | Boolean | false | 当开启时，会根据滑动速度，连续滑动多屏 | 支付宝小程序 |
| disable-programmatic-animation | Boolean | false | 是否禁用代码变动触发 swiper 切换时使用动画。 | 支付宝小程序 |
| display-multiple-items | Number | 1 | 同时显示的滑块数量 | app-nvue、支付宝小程序不支持 |
| skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | App、微信小程序、京东小程序 |
| disable-touch | Boolean | false | 是否禁止用户 touch 操作 | App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序（只在初始化时有效，不能动态变更） |
| touchable | Boolean | true | 是否监听用户的触摸事件，只在初始化时有效，不能动态变更 | 字节跳动小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch） |
| easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序、京东小程序 |
| @change | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | ||
| @transition | EventHandle | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy | App、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序 | |
| @animationfinish | EventHandle | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} | 字节跳动小程序与飞书小程序不支持 |
示例：
<template>
<view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :vertical="false">
<swiper-item>
<view class="swiper-item">
<image src="http://www.jtport.com/img/1.jpg" mode="scaleToFill" style="width: 750rpx;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image src="http://www.jtport.com/img/2.jpg" mode="scaleToFill" style="width: 750rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
4 match-media
media query 匹配检测节点。
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| min-width | number | 否 | 页面最小宽度（ px 为单位） | |
| max-width | number | 否 | 页面最大宽度（ px 为单位） | |
| width | number | 否 | 页面宽度（ px 为单位） | |
| min-height | number | 否 | 页面最小高度（ px 为单位） | |
| max-height | number | 否 | 页面最大高度（ px 为单位） | |
| height | number | 否 | 页面高度（ px 为单位） | |
| orientation | string | 否 | 屏幕方向（ landscape 或 portrait ） |
示例：
<template>
<view>
<match-media :min-width="375" :max-width="800">
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
</match-media>
<view class="">
今天是个好日期
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
5 movable-area和movable-view
movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。
即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。
当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scale-area | Boolean | false | 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area |
注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px
movable-view可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| 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改变时的动画和过界回弹的动画，值越大移动越快 | 360小程序不支持 |
| friction | Number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 | 360小程序不支持 |
| disabled | Boolean | false | 是否禁用 | |
| scale | Boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 | 360小程序不支持 |
| scale-min | Number | 0.5 | 定义缩放倍数最小值 | |
| scale-max | Number | 10 | 定义缩放倍数最大值 | |
| scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.5 - 10 | |
| animation | Boolean | true | 是否使用动画 | |
| @change | EventHandle | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） | ||
| @scale | EventHandle | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}， |
movable-view 必须设置width和height属性，不设置默认为10px
示例：
<template>
<view>
<movable-area class="box">
<movable-view direction='all' class="move-box" @change="moveChange"></movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
moveChange(e) {
console.log(e.detail);
if (e.detail.x == 356 && e.detail.y == 356) {
alert("成功")
}
}
}
}
</script>
<style>
.box {
box-sizing: border-box;
width: 750rpx;
height: 750rpx;
border: 7.5rpx solid red;
}
.move-box {
width: 50px;
height: 50px;
background: blue;
}
</style>6 cover-view和 cover-image
覆盖在原生组件上的文本视图和图片视图。
app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view和cover-image。
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 | ||
| @load | eventhandle | 图片加载成功时触发 | 微信小程序 2.1.0、京东小程序 | |
| @error | eventhandle | 图片加载失败时触发 | 微信小程序 2.1.0、京东小程序 |
app-vue上可覆盖的原生组件：<video>、<map>
示例：
<template>
<view>
<!-- 内置浏览器使用video有问题 使用外置浏览器 -->
<video src="http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4" controls>
<cover-view class="controls-title">简单的自定义 controls</cover-view>
<!-- <cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image> -->
</video>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.controls-title {
color: white;
position: relative;
top: 20px
}
</style>