uniapp ios浏览器上 视频无法自动播放

目录

3.1、视图容器

view

scroll-view

swiper

match-media

3.2、表单组件

form

input

App平台iOS端软键盘上方横条去除方案

关于软键盘弹出的逻辑说明

关于软键盘收起的逻辑说明

picker

3.3、 路由与页面跳转

navigator组件

3.4、 地图

map

---

3.1、视图容器

所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。

view

类似于html中的div，用于包裹各种元素内容。如果使用nvue，包裹文字的容器应该使用<text>组件。

属性：

属性名	类型	默认值	说明
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="content">
        这是一个view组件
    </view>
</template>

对应html代码：

<div class='content'>
    这是一个view组件
</div>

官方给出了一个官方demo，用于演示各种组件所带来的效果。

如图所示，在左侧空白部分右键->新建->项目然后为项目取个你中意的名字，然后选择第二个项目模板Hello uni-app，里面有演示uni-app框架的组件，接口，模板等内容，点击新建，就创建好了官方为我们提供的一个演示项目。

 

打开项目后，我们点击上方的运行，然后选择运行到浏览器，运行过程可能需要一段时间，运行完毕后我们就可以在浏览器中查看我们创建好的官方为我们提供的演示项目，我们可以看到uni-app包含的所有基础组件。

如图所示：

 

在这个项目中我们也可以借鉴官方写的代码，来学习和完善自身。

scroll-view

这个组件是用于把某个区域变为可以滚动的区域的一个组件。

注意：在webview渲染的页面中，区域滚动的性能不及页面滚动。

属性说明：

属性名	类型	默认值	说明
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点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
show-scrollbar	Boolean	false	控制是否出现滚动条
refresher-enabled	Boolean	false	开启自定义下拉刷新
refresher-threshold	Number	45	设置自定义下拉刷新阈值
refresher-default-style	String	"black"	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式
refresher-background	String	"#FFF"	设置自定义下拉刷新区域背景颜色
refresher-triggered	Boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
enable-flex	Boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。
scroll-anchoring	Boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。

更多内容参考官方：scroll-view | uni-app官网

使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

示例代码：

<template>
    <view class="content">
        <view>
            <scroll-view class="scroll-Y" scroll-y="true" >
                <view class="scroll-item">内容1</view>
                <view class="scroll-item">内容2</view>
                <view class="scroll-item">内容3</view>
                <view class="scroll-item">内容4</view>
                <view class="scroll-item">内容5</view>
                <view class="scroll-item">内容6</view>
                <view class="scroll-item">内容7</view>
                <view class="scroll-item">内容8</view>
            </scroll-view>
        </view>
    </view>
</template>
<style>
    .scroll-Y{
        
        height: 150px;
    }
    .scroll-item{
        width: 200px;
        height: 80px;
        color: darkred;
        text-align: center;
        line-height: 80px;
        white-space: nowrap;
        background-color: #005f00;
        margin: 5px;
    }
</style>

自定义下拉刷新

自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。参考：scroll-view | uni-app官网

注意：

• APP-vue和小程序中，请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。
• scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面，长列表应该使用list而不是scroll-view
• scroll-into-view 的优先级高于 scroll-top。
• scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
• 若要使用下拉刷新，建议使用页面的滚动，而不是 scroll-view 。
• 如果遇到scroll-top、scroll-left、refresher-triggered属性设置不生效的问题参考：全局配置 | uni-app官网
• scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条

swiper

滑块视图容器，一般用于左右滑动或上下滑动，相当于html中轮播图和首页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
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定
interval	Number	5000	自动切换时间间隔，单位为毫秒
duration	Number	500	滑动动画时长，单位为毫秒
circular	Boolean	false	是否采用衔接滑动，也就是一直循环
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。
display-multiple-items	Number	1	同时显示的滑块数量
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
disable-touch	Boolean	false	是否禁止用户 touch 操作
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic

更多内容，访问官网：swiper | uni-app官网

swiper事件

事件名		事件说明	平台差异
@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}	字节跳动小程序与飞书小程序不支持

change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：

• autoplay 自动播放导致swiper变化。
• touch 用户划动引起swiper变化。
• 其他原因将用空字符串表示

swiper是单页组件，有开发者会把它拿来做长列表拖动，有一些关于这方面的专项问题：

• swiper是单页组件，适合做轮播图和简单的列表左右滑动。
• 如果想要做复杂的，大量的列表左右滑动，需要特殊的性能优化技能，并且会有一些限制。
• 插件市场有一个案例：新闻资讯App模板 - DCloud 插件市场 。 这个案例中在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据，dom中的数据过多时，它会自动释放。就是说App上，只要看过这一页，再进去时内容是还在的。而在非App上，只能做到缓存3页数据，其他页即便看过，再进去也会重新加载。并且非App的这种情况下，不再提供下拉刷新。插件市场中的其他插件或许也有类似功能的插件，但是性能不佳，不如这个好。

Tips:

其中只可放置 <swiper-item> 组件，否则会导致未定义的行为。

使用竖向滚动的时候，需要给<scroll-view>一个固定的高度。

如果遇到current、current-item-id属性设置不生效的问题参考：全局配置 | uni-app官网

banner轮播图的切换效果和下面几个点的效果可以在插件市场下载其他多种样式进行设置。

如果轮播图需要通过后台管理，可以参考一个插件：uniCloud admin banner插件，可以在插件市场中找到。

easing-function(缓动函数)

值	说明
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

示例：

<template>
    <view class="content" hover-class="">
        <view>
            <view class="title">
                来一个轮播图
            </view>
            <view class="swipers">
                <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item>
                        <view class="swiper-item uni-bg-red">11111</view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item uni-bg-blue">22222</view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item uni-bg-green">33333</view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>

<style>
    .swipers{
    width: 450rpx;
    }
    
    .swiper-item{
        width: 450rpx;
        height: 200rpx;
        line-height: 200rpx;
        font-size: 48rpx;
        text-align: center;
    }
</style>

 

match-media

类似于css中的媒体查询，用来适配大小屏幕，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。

例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。

兼容性：

app	h5	微信小程序	支付宝小程序	qq	百度	字节	飞书	360	快应用	京东
2.8.12+，app-vue	√	基础库:2.11.1+	√	√	√	√	×	√	×	×

注意：支付宝小程序、qq小程序、百度小程序、字节小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。即只有初次加载时才会媒体查询一次。

属性说明：

属性名	类型	默认值	必填	说明
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 ）

代码示例：

<view class="">
    <view class="title">
        媒体查询
    </view>
    <match-media :min-width="375" :max-width="800">
        <view class="">
            这部分内容会在屏幕宽度在375px~800px的时候才会显示。
        </view>
        <view class="">
            这部分内容会在屏幕宽度在375px~800px的时候才会显示。
        </view>
        <view class="">
            这部分内容会在屏幕宽度在375px~800px的时候才会显示。
        </view>
        <view class="">
            这部分内容会在屏幕宽度在375px~800px的时候才会显示。
        </view>
    </match-media>
    <match-media :min-height="400" orientation="landscape">
        <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
        <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
        <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
        <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
    </match-media>
</view>

当屏幕宽度大于800px的时候：

 

当屏幕宽度大于375px小于800px的时候：

 

当把屏幕宽度设置为大于400px小于800px的时候，并且把屏幕设置为横向显示时：

 

3.2、表单组件

form

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当用于点击表单中formType为submit的组件时，会将数据进行提交，需要在表单元素上添加name属性作为每个表单元素的值的key。

用法和原生html的用法类似。没有太大差别。

input

单行输入框，用于获取用户的字符串输入，在uniapp中，input就仅仅只有输入框的功能，其他功能，如：多选，单选，日期等有专门的组件。

而在html规范中，input的type值为不同的值时，会有意想不到的作用来将input作为单选框，多选框，日期选择等等功能。

input的type属性的有效值：

值	说明	平台差异说明
text	文本输入键盘
number	数字输入键盘	均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。
idcard	身份证输入键盘	微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
digit	带小数点的数字键盘	均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。
tel	电话输入键盘	仅App的nvue页面支持
safe-password	密码安全输入键盘	微信小程序
nickname	昵称输入键盘	微信小程序

number类型，在小程序平台只能输入整型数字。如果想要在小程序平台输入浮点数，需要使用digit类型的input。

App平台iOS端软键盘上方横条去除方案

app-vue在iOS上，webview中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮。 如不想显示这个横条，可以配置softinputNavBar: 'none'

配置方式，在 pages.json 中某个页面或全局配置 style

"app-plus": {
    "softinputNavBar": "none"
}

• 如需使用js动态设置softinputNavBar

this.$scope.$getAppWebview().setStyle({
    softinputNavBar: 'none'
})
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效

关于软键盘弹出的逻辑说明

App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异

• adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度
• adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住

配置方式，在 pages.json 中配置 style

"app-plus": {
    "softinputMode": "adjustResize"
}

• adjustResize模式在Android App上，弹起键盘和收回键盘时，因为要重设webview窗体高度，可能会在个别安卓机型闪现灰屏或漏出下层页面内容。
• 小程序端在 input 聚焦期间，避免使用 css 动画。

关于软键盘收起的逻辑说明

• Android上在软键盘弹出后，点击back或点击非置焦区域可收起软键盘。
• iOS上如果软键盘上方有带有“完成”的横条，则需要点完成才能收起键盘；如果没有软键盘上方横条，则点击非input/textarea区域即可收起软键盘

以上为默认逻辑，uni-app同时提供了隐藏软键盘的api：uni.hideKeyboard()

picker

从底部弹出的滚动选择器。支持五种mode类型，分别是：普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。

如果未指定，默认为普通选择器。

每个平台的样式有略微差异。

普通选择器

`mode=selector`

多列选择器

`mode = multiSelector`

支付宝小程序的picker组件不支持多列选择器。可以用picker-view组件进行替换。

时间选择器

`mode = time`

App端的时间选择器调用的是原生os的时间选择控件，在不同的平台表现不同。

日期选择器

`mode = date`

省市区选择器

`mode = region`

小程序平台在引擎层面内置了省市区数据。但省市区包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有在前端内置这些数据。可以基于多列picker或picker-view，自行填充城市数据。插件市场有较多类似插件，详见。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。尤其推荐插件uni-data-picker，自带省市区的联网数据，自带懒加载。

注意：在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此。

3.3、 路由与页面跳转

navigator组件

该组件类似于html中的a标签，与之不同的地方是，该组件不能跳转到外部链接，只能跳转到本地。目标页面必须在pages.json中注册。

属性说明

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

3.4、 地图

map

地图组件。

地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	√	√	√	√	1.63+	1.9.0+	√	x	√	√

地图服务商说明

地图服务商	App	H5	微信小程序
高德	√	3.6.0+
Goolge	3.4+ 仅nvue页面	3.2.10+
腾讯		√	√

属性说明

属性名	类型	默认值	说明	平台差异说明
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为3-20	高德地图缩放比例与微信小程序不同
theme	String	normal	主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）	京东小程序
min-scale	Number	3	最小缩放级别	App-nvue 3.1.0+、微信小程序2.13+
max-scale	Number	20	最大缩放级别	App-nvue 3.1.0+、微信小程序2.13+
layer-style	Number/String	1	个性化地图	App-nvue 3.1.0+、微信小程序2.13+
markers	Array		标记点
polyline	Array		路线	飞书小程序不支持
circles	Array		圆
controls	Array		控件
include-points	Array		缩放视野以包含所有给定的坐标点	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序
enable-3D	Boolean	false	是否显示3D楼块	App-nvue 2.1.5+、微信小程序2.3.0
show-compass	Boolean	false	是否显示指南针	App-nvue 2.1.5+、微信小程序2.3.0
enable-zoom	Boolean	true	是否支持缩放	App-nvue 2.1.5+、微信小程序2.3.0
enable-scroll	Boolean	true	是否支持拖动	App-nvue 2.1.5+、微信小程序2.3.0
enable-rotate	Boolean	false	是否支持旋转	App-nvue 2.1.5+、微信小程序2.3.0
enable-overlooking	Boolean	false	是否开启俯视	App-nvue 2.1.5+、微信小程序2.3.0
enable-satellite	Boolean	false	是否开启卫星图	App-nvue 2.1.5+、微信小程序2.7.0
enable-traffic	Boolean	false	是否开启实时路况	App-nvue 2.1.5+、微信小程序2.7.0
enable-poi	Boolean	false	是否展示 POI 点	App-nvue 3.1.0+
enable-building	Boolean	false	是否展示建筑物	App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)
show-location	Boolean		显示带有方向的当前定位点	微信小程序、H5、百度小程序、支付宝小程序、京东小程序
polygons	Array.<polygon>		多边形	App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序
enable-indoorMap	Boolean	false	是否展示室内地图	App-nvue 3.1.0+
@markertap	EventHandle		点击标记点时触发，e.detail = {markerId}	App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id）
@labeltap	EventHandle		点击label时触发，e.detail = {markerId}	微信小程序2.9.0
@callouttap	EventHandle		点击标记点对应的气泡时触发，e.detail = {markerId}
@controltap	EventHandle		点击控件时触发，e.detail = {controlId}
@regionchange	EventHandle		视野发生变化时触发	微信小程序、H5、百度小程序、支付宝小程序、京东小程序
@tap	EventHandle		点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度
@updated	EventHandle		在地图渲染更新完成时触发	微信小程序、H5、百度小程序
@anchorpointtap	EventHandle		点击定位标时触发，e.detail = {longitude, latitude}	App-nvue 3.1.0+、微信小程序2.13+
@poitap	EventHandle		点击地图poi点时触发，e.detail = {name, longitude, latitude}	微信小程序2.3.0+