Skip to content

U
unidocs-zh

洋仔不打烊 / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 0
Fork 0
U
unidocs-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b2f9c713 编写于 作者: study夏羽's avatar study夏羽
浏览文件
操作

add preview

上级 cace02e7
隐藏空白更改
内联 并排
Showing with 224 addition and 83 deletion
docs/component/canvas.md
浏览文件 @ b2f9c713
......@@ -29,7 +29,9 @@
**示例：** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas)
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas
> Template
```vue
<template>
<view>
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
......@@ -38,12 +40,11 @@
</view>
</template>
```
```javascript
> Script
```vue
export default {
onReady: function (e) {
var context = uni.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
......@@ -68,6 +69,7 @@ export default {
}
}
```
:::
相关 api：[uni.createCanvasContext](/api/canvas/createCanvasContext)
......
docs/component/cover-image.md
浏览文件 @ b2f9c713
......@@ -62,7 +62,10 @@ app-vue上可覆盖的原生组件：`<video>`、`<map>`
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/cover-view/cover-view
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view class="page">
......@@ -73,6 +76,9 @@ app-vue上可覆盖的原生组件：`<video>`、`<map>`
</video>
</view>
</template>
```
> Script
```vue
<script>
export default {
data() {
......@@ -99,6 +105,9 @@ app-vue上可覆盖的原生组件：`<video>`、`<map>`
}
}
</script>
```
> Style
```vue
<style>
.page {
display: flex;
......@@ -137,3 +146,4 @@ app-vue上可覆盖的原生组件：`<video>`、`<map>`
}
</style>
```
:::
docs/component/image.md
浏览文件 @ b2f9c713
......@@ -47,7 +47,9 @@ mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
**示例：** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/image/image)
```html
::: preview
> Template
```vue
<template>
<view class="page">
<view class="image-list">
......@@ -62,7 +64,9 @@ mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
</view>
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
return {
......@@ -112,7 +116,10 @@ export default {
}
}
}
</script>
```
:::
原图
......
docs/component/map.md
浏览文件 @ b2f9c713
......@@ -211,7 +211,9 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad
**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/map/map)
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/map/map
> Template
```vue
<template>
<view>
<view class="page-body">
......@@ -223,8 +225,9 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad
</view>
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
return {
......@@ -247,8 +250,9 @@ export default {
}
}
</script>
```
:::
## App平台地图服务商差异
......
docs/component/movable-view.md
浏览文件 @ b2f9c713
......@@ -51,7 +51,10 @@
**示例**[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可快速体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view class="page-body">
......@@ -77,8 +80,9 @@
</view>
</template>
```
```js
> Script
```vue
<script>
export default {
data() {
return {
......@@ -105,6 +109,7 @@ export default {
}
}
}
</script>
```
:::
![uni](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/41b00010-4f30-11eb-a16f-5b3e54966275.png)
docs/component/navigator.md
浏览文件 @ b2f9c713
......@@ -43,6 +43,8 @@
**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/navigator/navigator)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/navigator/navigator
```html
<template>
<view>
......@@ -61,9 +63,7 @@
</view>
</view>
</template>
```
```javascript
<script>
// navigate.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
......@@ -71,7 +71,9 @@ export default {
console.log(option.name); //打印出上个页面传递的参数。
}
}
</script>
```
:::
url有长度限制，太长的字符串会传递失败，可使用[窗体通信](https://uniapp.dcloud.io/tutorial/page.html#emit)、[全局变量](https://ask.dcloud.net.cn/article/35021)，或`encodeURIComponent`等多种方式解决，如下为`encodeURIComponent`示例。
```html
......
docs/component/progress.md
浏览文件 @ b2f9c713
......@@ -20,26 +20,77 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/progress/progress)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
:::preview https://hellouniapp.dcloud.net.cn/pages/component/progress/progress
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress percent="20" show-info stroke-width="3" />
<progress :percent="pgList[0]" show-info stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="40" active stroke-width="3" />
<progress :percent="pgList[1]" stroke-width="3" />
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
</view>
<view class="progress-box">
<progress percent="60" active stroke-width="3" backgroundColor="#999"/>
<progress :percent="pgList[2]" stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="80" activeColor="red" active stroke-width="8" />
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
</view>
<view class="progress-control">
<button type="primary" @click="setProgress">设置进度</button>
<button type="warn" @click="clearProgress">清除进度</button>
</view>
</view>
</view>
</template>
```
> Script
```vue
<script>
export default {
data() {
return {
pgList: [0, 0, 0, 0]
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80]
},
clearProgress() {
this.pgList = [0, 0, 0, 0]
}
}
}
</script>
```
> Style
```vue
<style>
.progress-box {
display: flex;
height: 50rpx;
margin-bottom: 60rpx;
}
.uni-icon {
line-height: 1.5;
}
.progress-cancel {
margin-left: 40rpx;
}
.progress-control button {
margin-top: 20rpx;
}
</style>
```
:::
![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/43f66da0-4f30-11eb-b997-9918a5dda011.png)
docs/component/rich-text.md
浏览文件 @ b2f9c713
......@@ -88,7 +88,10 @@ nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/rich-text/rich-text)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/rich-text/rich-text
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view class="content">
......@@ -112,7 +115,9 @@ nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，
</view>
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
return {
......@@ -132,8 +137,8 @@ export default {
}
}
```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/ef5ba530-4f2f-11eb-bdc1-8bd33eb6adaa.png)
**Tips**
......
docs/component/scroll-view.md
浏览文件 @ b2f9c713
......@@ -39,7 +39,9 @@
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view>
......@@ -49,8 +51,8 @@
<text>\n纵向滚动</text>
</view>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll">
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
......@@ -59,6 +61,7 @@
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
点击这里返回顶部
</view>
<view class="uni-title uni-common-mt">
Horizontal Scroll
<text>\n横向滚动</text>
......@@ -70,50 +73,85 @@
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>
</view>
<view class="uni-common-pb"></view>
</view>
</view>
</template>
```
```javascript
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(() => {
this.scrollTop = 0
});
uni.showToast({
icon:"none",
title:"纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
> Script
```vue
<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
```
> Style
```vue
<style>
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
</style>
```
:::
### 自定义下拉刷新
注意自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。
```html
::: preview
> Template
```vue
<template>
<view>
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
......@@ -123,8 +161,8 @@ export default {
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
......@@ -162,7 +200,7 @@ export default {
</script>
```
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/99567750-4f2f-11eb-a16f-5b3e54966275.png)
:::
**Tips**
......
docs/component/swiper.md
浏览文件 @ b2f9c713
......@@ -81,7 +81,10 @@ change 事件返回 detail 中包含一个 source 字段，表示导致变更的
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/swiper/swiper)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/swiper/swiper
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view>
......@@ -127,7 +130,9 @@ change 事件返回 detail 中包含一个 source 字段，表示导致变更的
</view>
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
return {
......@@ -153,5 +158,7 @@ export default {
}
}
}
</script>
```
![uni](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/97ccca10-4f2f-11eb-b997-9918a5dda011.png)
:::
docs/component/text.md
浏览文件 @ b2f9c713
......@@ -33,7 +33,10 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/text/text)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/text/text
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
<view>
......@@ -49,7 +52,9 @@
</view>
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
return {
......@@ -91,10 +96,9 @@ export default {
}
}
}
</script>
```
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/245b9110-4f2f-11eb-97b7-0dc4655d6e68.png)
:::
**注意事项**
......
docs/component/video.md
浏览文件 @ b2f9c713
......@@ -87,7 +87,9 @@
**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/video/video)
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/video/video
> Template
```vue
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
......@@ -114,8 +116,9 @@
</view>
</template>
```
```javascript
> Script
```vue
<script>
export default {
data() {
return {
......@@ -164,9 +167,10 @@ export default {
}
}
}
</script>
```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/989ac870-4f2f-11eb-8a36-ebb87efcf8c0.png)
相关api：[uni.createVideoContext](/api/media/video-context?id=createvideocontext)
......
docs/component/view.md
浏览文件 @ b2f9c713
......@@ -20,6 +20,9 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/view/view)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可快速体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/view/view
```html
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
......@@ -47,9 +50,8 @@
</view>
</template>
```
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/113204c0-4f2f-11eb-97b7-0dc4655d6e68.png)
:::
**Tips**
- 小程序平台如果使用 `<div>` ，编译时会被转换为 `<view>`。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或