提交 afb9dee4 编写于 作者: L lvqing

Merge branch 'master' of https://gitcode.net/dcloud/unidocs-zh into dev_LQ

......@@ -129,20 +129,20 @@ uts中有2种方式使用json数据:
```ts
// components/Foo.uvue
<view>
<slot name="test name" />
<slot msg="test msg" />
</view>
import { SlotsType } from 'vue'
export default {
slots: Object as SlotsType<{
default: { name: string }
default: { msg: string }
}>
}
// page.uvue
<view>
<Foo>
<template v-slot="slotProps">
<text>{{ slotProps.name }}</text>
<text>{{ slotProps.msg }}</text>
</template>
</Foo>
</view>
......
......@@ -8,3 +8,51 @@
<!-- UTSCOMJSON.button.reference -->
## button样式修改@style
button组件属性中的size和type,属于预置样式,方便开发者使用。开发者也可以通过style和class来自定义样式。
button虽然可以内嵌text组件,但不建议通过text组件来修改button样式,因为会导致hove-class不生效。尤其是uvue中样式不继承。建议直接在button组件的style或class属性编写样式。
style和class的优先级,高于size和type属性。
```html
<template>
<button size="default" type="default"
style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
hover-class="is-hover">按钮</button>
</template>
<style>
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
border-color: #179b16;
}
</style>
```
## button点击
button 组件的点击遵循 vue 标准的 @click事件。
button 组件没有 url 属性,如果要跳转页面,可以在@click中编写,也可以在button组件外面套一层 navigator 组件。举例,如需跳转到about页面,可按如下几种代码写法执行:
```html
<template>
<view>
<navigator url="/pages/about/about"><button>通过navigator组件跳转到about页面</button></navigator>
<button @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
</view>
</template>
<script>
export default {
methods: {
goto(url:string) {
uni.navigateTo({
url:url
})
}
}
}
</script>
```
......@@ -8,14 +8,16 @@
- ref
- style
- class
- data-
## 组件公共事件
- @touchstart
- @touchmove
- @touchend
- @touchcancel
- @tap
- @click
- @click //与tap等价
- @longpress
### 冒泡事件系统
......
......@@ -18,3 +18,5 @@ text组件在web浏览器渲染(含浏览器、小程序webview渲染模式、
<!-- UTSCOMJSON.text.reference -->
## tips
- 选择复制,仅支持全选复制,暂未支持自由调整光标选择文字
\ No newline at end of file
......@@ -14,7 +14,9 @@
**注意**
- `appid` 由 DCloud 云端分配,主要用于 DCloud 相关的云服务,请勿自行修改。[详见](https://ask.dcloud.net.cn/article/35907)
- `uni-app-x` 必须存在,没有此节点 HBuilderX 将无法识别为 uni-app x项目
- `uni-app-x` 节点必须存在,它是一个项目是否是 uni-app x项目的核心标识。
* 缺少该节点时,HBuilderX 会把项目识别为 uni-app js引擎版项目(方形项目图标)。
* 含有该节点时,HBuilderX中的项目图标是圆形的。
### UNI-APP-X配置@uniappx
......
......@@ -84,6 +84,8 @@ uvue页面模板里,list-view组件使用v-for来循环添加list-item,自
另外注意list-item里的组件数量,它是dom元素的放大器。每个list-item里的dom数量多一点,页面性能就很容易被拖垮。
比如很多列表有评星,如果使用一个5个view的评星组件,那每个list-item都会多5个view,列表一长dom数量会惊人。
在hello uni-app x的复杂长列表示例中,评星没有使用任何自定义组件,只是一个text组件里面使用字体图标放了5个字符,极大减少组件数量。[详见](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/template/long-list/long-list-page.uvue)
## 优化排版效率
......@@ -98,4 +100,4 @@ dom数量优化前文已经讲了,那么如何优化排版效率?
3. 指定主轴方向的尺寸可以减少递归的深度
4. 文字测量属于耗时操作,给text组件指定宽高可以提升排版效率
5. 指定图片的尺寸信息可以减少排版次数
6. css单位尺寸中,百分比的性能不如px,使用百分比时父节点有明确宽高或者不依赖子节点确定宽高可以提升排版效率
6. css单位尺寸中,百分比的性能不如固定的px,使用百分比时父节点有明确宽高或者不依赖子节点确定宽高可以提升排版效率
......@@ -194,7 +194,7 @@ uni自带API,如下为目前支持的清单。
* [x] uni-storage的一系列API
### 定位
* [x] uni.getLocation 一期仅支持腾讯定位
* [x] uni.getLocation 一期仅支持系统定位和腾讯定位
### 媒体
* [x] uni.chooseImage 仅支持相册,不支持相机
......
......@@ -20,12 +20,9 @@ uvue框架内部做了一些错误拦截,减少崩溃,报错会触发app的o
目前框架支持捕获错误的来源有(仅限同步代码):
组件渲染器(template模板代码)
事件处理器(template模板代码中监听的事件)
生命周期钩子(应用、页面、组件的生命周期)
侦听器(watch监听)
- 组件渲染器(template模板代码)
- 事件处理器(template模板代码中监听的事件)
- 生命周期钩子(应用、页面、组件的生命周期)
- 侦听器(watch监听)
除了以上代码,其他地方如果代码写不对就会崩溃。开发者务必注意,在可能不安全的地方要try。
......@@ -19,6 +19,8 @@ UTS 的类型有:
除了特殊类型,其他类型都可以在变量后面通过`:`加类型名称来给这个变量声明类型。
详细的类型判断详见操作符文档:[typeof](operator.md#typeof)[instanceof](operator.md#instanceof)
## 布尔值(boolean)
布尔是简单的基础类型,只有2个值:`true``false`
......
......@@ -357,6 +357,7 @@ a as string // 异常
> 特别说明:
> HBuilderX3.9.0统一为以上规范,在HBuilderX3.9.0之前版本平台专有数字类型变量使用typeof操作符获取的值为"number"
为了与web保持一致,typeof除了布尔、数字、字符串、函数外,全部返回object。如需判断object范围内的具体类型,需另见[instanceof](#instanceof)
用法示例:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册