uni-app组件-视图容器的使用

沈麽鬼
627 阅读10分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

视图容器的使用

1 view

view标签同Html中的div，用于布局，无具体意义，是最常用的标签之一。属性有：

属性名类型默认值说明
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒

示例：

 <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>
 ​

image-20220819115112441

2 scroll-view

scroll-view是可滚动视图区域。用于区域滚动，可实现横向或纵向区域滚动，使用纵向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

属性说明

属性名类型默认值说明平台差异说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber/String50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber/String50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber/String设置竖向滚动条位置
scroll-leftNumber/String设置横向滚动条位置
scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向app-nvue，微信小程序
show-scrollbarBooleanfalse控制是否出现滚动条App-nvue 2.1.5+
refresher-enabledBooleanfalse开启自定义下拉刷新H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-thresholdNumber45设置自定义下拉刷新阈值H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-styleString"black"设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-backgroundString"#FFF"设置自定义下拉刷新区域背景颜色H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggeredBooleanfalse设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flexBooleanfalse启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。微信小程序 2.7.3
scroll-anchoringBooleanfalse开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。微信小程序 2.8.2
@scrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件
@scrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpullingEventHandle自定义下拉刷新控件被下拉H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefreshEventHandle自定义下拉刷新被触发H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestoreEventHandle自定义下拉刷新被复位H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabortEventHandle自定义下拉刷新被中止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-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
active-classStringswiper-item 可见时的 class支付宝小程序
changing-classStringacceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class支付宝小程序
ClassAlipay applet
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的 index
current-item-idString当前所在滑块的 item-id ，不能与 current 被同时指定支付宝小程序不支持
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长app-nvue不支持
circularBooleanfalse是否采用衔接滑动，即播放到末尾后重新回到开头
verticalBooleanfalse滑动方向是否为纵向
previous-marginString0px前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值app-nvue、字节跳动小程序、飞书小程序不支持
next-marginString0px后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值app-nvue、字节跳动小程序、飞书小程序不支持
accelerationBooleanfalse当开启时，会根据滑动速度，连续滑动多屏支付宝小程序
disable-programmatic-animationBooleanfalse是否禁用代码变动触发 swiper 切换时使用动画。支付宝小程序
display-multiple-itemsNumber1同时显示的滑块数量app-nvue、支付宝小程序不支持
skip-hidden-item-layoutBooleanfalse是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息App、微信小程序、京东小程序
disable-touchBooleanfalse是否禁止用户 touch 操作App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchableBooleantrue是否监听用户的触摸事件，只在初始化时有效，不能动态变更字节跳动小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-functionStringdefault指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic微信小程序、快手小程序、京东小程序
@changeEventHandlecurrent 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transitionEventHandleswiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dyApp、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序
@animationfinishEventHandle动画结束时会触发 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-widthnumber否页面最小宽度（ px 为单位）
max-widthnumber否页面最大宽度（ px 为单位）
widthnumber否页面宽度（ px 为单位）
min-heightnumber否页面最小高度（ px 为单位）
max-heightnumber否页面最大高度（ px 为单位）
heightnumber否页面高度（ px 为单位）
orientationstring否屏幕方向（ 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-areaBooleanfalse当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area

注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px

movable-view可移动的视图容器，在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

属性说明

属性名类型默认值说明平台差异说明
directionStringnonemovable-view的移动方向，属性值有all、vertical、horizontal、none
inertiaBooleanfalsemovable-view是否带有惯性
out-of-boundsBooleanfalse超过可移动区域后，movable-view是否还可以移动
xNumber / String定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
yNumber / String定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
dampingNumber20阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快360小程序不支持
frictionNumber2摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值360小程序不支持
disabledBooleanfalse是否禁用
scaleBooleanfalse是否支持双指缩放，默认缩放手势生效区域是在movable-view内360小程序不支持
scale-minNumber0.5定义缩放倍数最小值
scale-maxNumber10定义缩放倍数最大值
scale-valueNumber1定义缩放倍数，取值范围为 0.5 - 10
animationBooleantrue是否使用动画
@changeEventHandle拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scaleEventHandle缩放过程中触发的事件，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。

属性说明

属性名类型默认值说明平台差异说明
srcString图标路径。支持本地路径、网络路径。不支持 base64 格式。
@loadeventhandle图片加载成功时触发微信小程序 2.1.0、京东小程序
@erroreventhandle图片加载失败时触发微信小程序 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>
 ​
avatar
文章
阅读
粉丝