mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,320 @@
|
||||
# audio 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/audio.html
|
||||
|
||||
## 概述
|
||||
|
||||
`audio` 是音频播放组件，用于播放音频。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<audio src="https://example.com/audio.mp3" controls></audio>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本音频播放
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<audio
|
||||
:src="audioSrc"
|
||||
controls
|
||||
class="audio-player"
|
||||
></audio>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioSrc: 'https://example.com/audio.mp3'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.audio-player {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 音频播放控制
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<audio
|
||||
:src="audioSrc"
|
||||
:controls="showControls"
|
||||
:autoplay="autoplay"
|
||||
:loop="loop"
|
||||
@play="handlePlay"
|
||||
@pause="handlePause"
|
||||
@ended="handleEnded"
|
||||
class="audio-player"
|
||||
></audio>
|
||||
<view class="controls">
|
||||
<button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
|
||||
<button @click="toggleLoop">{{ loop ? '取消循环' : '循环播放' }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioSrc: 'https://example.com/audio.mp3',
|
||||
showControls: true,
|
||||
autoplay: false,
|
||||
loop: false,
|
||||
isPlaying: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePlay() {
|
||||
this.isPlaying = true
|
||||
console.log('音频开始播放')
|
||||
},
|
||||
handlePause() {
|
||||
this.isPlaying = false
|
||||
console.log('音频暂停')
|
||||
},
|
||||
handleEnded() {
|
||||
this.isPlaying = false
|
||||
console.log('音频播放结束')
|
||||
},
|
||||
togglePlay() {
|
||||
// 需要通过 ref 调用音频组件的方法
|
||||
if (this.isPlaying) {
|
||||
this.$refs.audio.pause()
|
||||
} else {
|
||||
this.$refs.audio.play()
|
||||
}
|
||||
},
|
||||
toggleLoop() {
|
||||
this.loop = !this.loop
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 音频列表
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="(item, index) in audioList"
|
||||
:key="index"
|
||||
class="audio-item"
|
||||
>
|
||||
<text class="audio-title">{{ item.title }}</text>
|
||||
<audio
|
||||
:src="item.src"
|
||||
controls
|
||||
class="audio-player"
|
||||
@play="handleAudioPlay(index)"
|
||||
></audio>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioList: [
|
||||
{
|
||||
src: 'https://example.com/audio1.mp3',
|
||||
title: '音频1'
|
||||
},
|
||||
{
|
||||
src: 'https://example.com/audio2.mp3',
|
||||
title: '音频2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAudioPlay(index) {
|
||||
console.log('播放音频', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.audio-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.audio-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.audio-player {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 播放进度显示
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<audio
|
||||
:src="audioSrc"
|
||||
controls
|
||||
@timeupdate="handleTimeUpdate"
|
||||
class="audio-player"
|
||||
></audio>
|
||||
<view class="progress-info">
|
||||
<text>播放进度：{{ currentTime }}s / {{ duration }}s</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioSrc: 'https://example.com/audio.mp3',
|
||||
currentTime: 0,
|
||||
duration: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTimeUpdate(e) {
|
||||
this.currentTime = e.detail.currentTime
|
||||
this.duration = e.detail.duration
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 自定义播放器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="custom-player">
|
||||
<text class="audio-title">{{ currentAudio.title }}</text>
|
||||
<view class="player-controls">
|
||||
<button @click="playPrevious">上一首</button>
|
||||
<button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
|
||||
<button @click="playNext">下一首</button>
|
||||
</view>
|
||||
<audio
|
||||
ref="audio"
|
||||
:src="currentAudio.src"
|
||||
:autoplay="autoplay"
|
||||
@play="handlePlay"
|
||||
@pause="handlePause"
|
||||
@ended="handleEnded"
|
||||
></audio>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioList: [
|
||||
{ src: 'https://example.com/audio1.mp3', title: '音频1' },
|
||||
{ src: 'https://example.com/audio2.mp3', title: '音频2' },
|
||||
{ src: 'https://example.com/audio3.mp3', title: '音频3' }
|
||||
],
|
||||
currentIndex: 0,
|
||||
isPlaying: false,
|
||||
autoplay: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentAudio() {
|
||||
return this.audioList[this.currentIndex]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
togglePlay() {
|
||||
if (this.isPlaying) {
|
||||
this.$refs.audio.pause()
|
||||
} else {
|
||||
this.$refs.audio.play()
|
||||
}
|
||||
},
|
||||
playPrevious() {
|
||||
this.currentIndex = (this.currentIndex - 1 + this.audioList.length) % this.audioList.length
|
||||
this.autoplay = true
|
||||
},
|
||||
playNext() {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.audioList.length
|
||||
this.autoplay = true
|
||||
},
|
||||
handlePlay() {
|
||||
this.isPlaying = true
|
||||
this.autoplay = false
|
||||
},
|
||||
handlePause() {
|
||||
this.isPlaying = false
|
||||
},
|
||||
handleEnded() {
|
||||
this.isPlaying = false
|
||||
// 自动播放下一首
|
||||
this.playNext()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| src | String | - | 要播放音频的资源地址 |
|
||||
| controls | Boolean | false | 是否显示默认播放控件 |
|
||||
| autoplay | Boolean | false | 是否自动播放 |
|
||||
| loop | Boolean | false | 是否循环播放 |
|
||||
| muted | Boolean | false | 是否静音播放 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 音频地址需要配置合法域名
|
||||
2. `autoplay` 在某些平台可能不生效
|
||||
3. 可以通过事件监听播放状态
|
||||
4. 建议使用 `controls` 显示播放控件
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/audio.html
|
||||
@@ -0,0 +1,233 @@
|
||||
# button 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/button.html
|
||||
|
||||
## 概述
|
||||
|
||||
`button` 是按钮组件，用于触发操作。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<button @click="handleClick">点击按钮</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('按钮被点击')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 按钮类型
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button type="default">默认按钮</button>
|
||||
<button type="primary">主要按钮</button>
|
||||
<button type="warn">警告按钮</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 按钮大小
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button size="mini">小按钮</button>
|
||||
<button size="default">默认按钮</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 3: 镂空按钮
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button type="primary" plain>镂空按钮</button>
|
||||
<button type="warn" plain>镂空警告按钮</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 4: 禁用按钮
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button disabled>禁用按钮</button>
|
||||
<button :disabled="isDisabled" @click="handleClick">
|
||||
{{ isDisabled ? '已禁用' : '可点击' }}
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDisabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.isDisabled = true
|
||||
setTimeout(() => {
|
||||
this.isDisabled = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 加载状态
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button :loading="isLoading" @click="handleSubmit">
|
||||
提交
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleSubmit() {
|
||||
this.isLoading = true
|
||||
try {
|
||||
// 模拟请求
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 6: 表单提交
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<input name="username" placeholder="用户名" />
|
||||
<input name="password" type="password" placeholder="密码" />
|
||||
<button form-type="submit">提交</button>
|
||||
<button form-type="reset">重置</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
console.log('表单数据', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 7: 开放能力（微信小程序）
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 获取用户信息 -->
|
||||
<button open-type="getUserInfo" @getuserinfo="getUserInfo">
|
||||
获取用户信息
|
||||
</button>
|
||||
|
||||
<!-- 打开客服会话 -->
|
||||
<button open-type="contact">联系客服</button>
|
||||
|
||||
<!-- 分享 -->
|
||||
<button open-type="share">分享</button>
|
||||
|
||||
<!-- 打开设置 -->
|
||||
<button open-type="openSetting">打开设置</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getUserInfo(e) {
|
||||
console.log('用户信息', e.detail.userInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| size | String | default | 按钮的大小，可选值：default、mini |
|
||||
| type | String | default | 按钮的样式类型，可选值：primary、default、warn |
|
||||
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| loading | Boolean | false | 名称前是否带 loading 图标 |
|
||||
| form-type | String | - | 用于 form 组件，可选值：submit、reset |
|
||||
| open-type | String | - | 开放能力，如：getUserInfo、contact、share 等 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `open-type` 在不同平台支持的能力不同
|
||||
2. 按钮的样式可以通过 CSS 自定义
|
||||
3. `loading` 图标在不同平台显示可能不同
|
||||
4. 建议使用 `@click` 事件处理点击，而不是依赖 `open-type`
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/button.html
|
||||
- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html
|
||||
@@ -0,0 +1,347 @@
|
||||
# camera 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/camera.html
|
||||
|
||||
## 概述
|
||||
|
||||
`camera` 是相机组件，用于调用设备相机进行拍照或录像。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<camera
|
||||
device-position="back"
|
||||
@error="handleError"
|
||||
></camera>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleError(e) {
|
||||
console.error('相机错误', e.detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本相机
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<camera
|
||||
device-position="back"
|
||||
flash="off"
|
||||
class="camera"
|
||||
@error="handleError"
|
||||
></camera>
|
||||
<button @click="takePhoto">拍照</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext('myCamera', this)
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
console.log('拍照成功', res.tempImagePath)
|
||||
uni.previewImage({
|
||||
urls: [res.tempImagePath]
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
console.error('相机错误', e.detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.camera {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 拍照和录像
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<camera
|
||||
ref="camera"
|
||||
device-position="back"
|
||||
flash="off"
|
||||
class="camera"
|
||||
@error="handleError"
|
||||
></camera>
|
||||
<view class="controls">
|
||||
<button @click="takePhoto">拍照</button>
|
||||
<button @click="startRecord">开始录像</button>
|
||||
<button @click="stopRecord">停止录像</button>
|
||||
<button @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isRecording: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext('myCamera', this)
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
console.log('拍照成功', res.tempImagePath)
|
||||
}
|
||||
})
|
||||
},
|
||||
startRecord() {
|
||||
const ctx = uni.createCameraContext('myCamera', this)
|
||||
ctx.startRecord({
|
||||
success: () => {
|
||||
this.isRecording = true
|
||||
console.log('开始录像')
|
||||
}
|
||||
})
|
||||
},
|
||||
stopRecord() {
|
||||
const ctx = uni.createCameraContext('myCamera', this)
|
||||
ctx.stopRecord({
|
||||
success: (res) => {
|
||||
this.isRecording = false
|
||||
console.log('录像成功', res.tempVideoPath)
|
||||
}
|
||||
})
|
||||
},
|
||||
switchCamera() {
|
||||
// 需要通过 ref 切换
|
||||
this.$refs.camera.switchCamera()
|
||||
},
|
||||
handleError(e) {
|
||||
console.error('相机错误', e.detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 切换摄像头和闪光灯
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<camera
|
||||
:device-position="devicePosition"
|
||||
:flash="flash"
|
||||
class="camera"
|
||||
></camera>
|
||||
<view class="controls">
|
||||
<button @click="switchCamera">切换摄像头</button>
|
||||
<button @click="toggleFlash">切换闪光灯</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
devicePosition: 'back',
|
||||
flash: 'off'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchCamera() {
|
||||
this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
|
||||
},
|
||||
toggleFlash() {
|
||||
const flashOptions = ['off', 'on', 'auto', 'torch']
|
||||
const currentIndex = flashOptions.indexOf(this.flash)
|
||||
this.flash = flashOptions[(currentIndex + 1) % flashOptions.length]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 拍照并上传
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<camera
|
||||
device-position="back"
|
||||
class="camera"
|
||||
></camera>
|
||||
<button @click="takePhotoAndUpload">拍照并上传</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
takePhotoAndUpload() {
|
||||
const ctx = uni.createCameraContext('myCamera', this)
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
// 上传图片
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: res.tempImagePath,
|
||||
name: 'file',
|
||||
success: (uploadRes) => {
|
||||
const data = JSON.parse(uploadRes.data)
|
||||
console.log('上传成功', data.url)
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 自定义相机界面
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<camera
|
||||
device-position="back"
|
||||
flash="off"
|
||||
class="camera"
|
||||
></camera>
|
||||
<view class="camera-overlay">
|
||||
<view class="camera-controls">
|
||||
<button class="control-btn" @click="switchCamera">切换</button>
|
||||
<button class="control-btn capture-btn" @click="takePhoto">拍照</button>
|
||||
<button class="control-btn" @click="toggleFlash">闪光</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
devicePosition: 'back',
|
||||
flash: 'off'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext('myCamera', this)
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
uni.previewImage({
|
||||
urls: [res.tempImagePath]
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
switchCamera() {
|
||||
this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
|
||||
},
|
||||
toggleFlash() {
|
||||
const flashOptions = ['off', 'on', 'auto']
|
||||
const currentIndex = flashOptions.indexOf(this.flash)
|
||||
this.flash = flashOptions[(currentIndex + 1) % flashOptions.length]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.camera {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.camera-overlay {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 20px;
|
||||
}
|
||||
.camera-controls {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.control-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
}
|
||||
.capture-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| device-position | String | back | 摄像头朝向，可选值：back、front |
|
||||
| flash | String | off | 闪光灯，可选值：on、off、auto、torch |
|
||||
| frame-size | String | medium | 指定期望的相机帧数据尺寸，可选值：small、medium、large |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ❌ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. H5 平台不支持此组件
|
||||
2. 需要通过 `uni.createCameraContext` 创建相机上下文
|
||||
3. 拍照和录像需要通过上下文方法调用
|
||||
4. 建议全屏显示相机组件
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/camera.html
|
||||
- **Camera API**: https://doc.dcloud.net.cn/uni-app-x/api/media/camera.html
|
||||
@@ -0,0 +1,247 @@
|
||||
# canvas 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/canvas.html
|
||||
|
||||
## 概述
|
||||
|
||||
`canvas` 是画布组件，用于绘制图形、文字等。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<canvas canvas-id="myCanvas" class="canvas"></canvas>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.drawCanvas()
|
||||
},
|
||||
methods: {
|
||||
drawCanvas() {
|
||||
const ctx = uni.createCanvasContext('myCanvas', this)
|
||||
ctx.setFillStyle('#007aff')
|
||||
ctx.fillRect(0, 0, 200, 200)
|
||||
ctx.draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.canvas {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 绘制矩形
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<canvas canvas-id="myCanvas" class="canvas"></canvas>
|
||||
<button @click="drawRect">绘制矩形</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.drawRect()
|
||||
},
|
||||
methods: {
|
||||
drawRect() {
|
||||
const ctx = uni.createCanvasContext('myCanvas', this)
|
||||
ctx.setFillStyle('#007aff')
|
||||
ctx.fillRect(10, 10, 150, 100)
|
||||
ctx.draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.canvas {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 绘制圆形
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<canvas canvas-id="myCanvas" class="canvas"></canvas>
|
||||
<button @click="drawCircle">绘制圆形</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.drawCircle()
|
||||
},
|
||||
methods: {
|
||||
drawCircle() {
|
||||
const ctx = uni.createCanvasContext('myCanvas', this)
|
||||
ctx.beginPath()
|
||||
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
|
||||
ctx.setFillStyle('#4cd964')
|
||||
ctx.fill()
|
||||
ctx.draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 绘制文字
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<canvas canvas-id="myCanvas" class="canvas"></canvas>
|
||||
<button @click="drawText">绘制文字</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.drawText()
|
||||
},
|
||||
methods: {
|
||||
drawText() {
|
||||
const ctx = uni.createCanvasContext('myCanvas', this)
|
||||
ctx.setFontSize(20)
|
||||
ctx.setFillStyle('#333')
|
||||
ctx.fillText('Hello Canvas', 10, 50)
|
||||
ctx.draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 绘制图片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<canvas canvas-id="myCanvas" class="canvas"></canvas>
|
||||
<button @click="drawImage">绘制图片</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.drawImage()
|
||||
},
|
||||
methods: {
|
||||
drawImage() {
|
||||
const ctx = uni.createCanvasContext('myCanvas', this)
|
||||
uni.downloadFile({
|
||||
url: 'https://example.com/image.jpg',
|
||||
success: (res) => {
|
||||
ctx.drawImage(res.tempFilePath, 0, 0, 200, 200)
|
||||
ctx.draw()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 保存为图片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<canvas canvas-id="myCanvas" class="canvas"></canvas>
|
||||
<button @click="drawAndSave">绘制并保存</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.drawCanvas()
|
||||
},
|
||||
methods: {
|
||||
drawCanvas() {
|
||||
const ctx = uni.createCanvasContext('myCanvas', this)
|
||||
ctx.setFillStyle('#007aff')
|
||||
ctx.fillRect(0, 0, 200, 200)
|
||||
ctx.setFontSize(20)
|
||||
ctx.setFillStyle('#fff')
|
||||
ctx.fillText('Canvas', 70, 100)
|
||||
ctx.draw()
|
||||
},
|
||||
drawAndSave() {
|
||||
this.drawCanvas()
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'myCanvas',
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}, this)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| canvas-id | String | - | canvas 组件的唯一标识符 |
|
||||
| disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要在 `onReady` 生命周期中绘制
|
||||
2. 调用 `ctx.draw()` 才会真正绘制到画布上
|
||||
3. 可以通过 `uni.canvasToTempFilePath` 将画布转为图片
|
||||
4. 不同平台的 API 可能略有差异
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/canvas.html
|
||||
- **Canvas API**: https://doc.dcloud.net.cn/uni-app-x/api/canvas/canvas.html
|
||||
@@ -0,0 +1,233 @@
|
||||
# checkbox 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html
|
||||
|
||||
## 概述
|
||||
|
||||
`checkbox` 是多项选择器组件，用于多选场景。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<checkbox value="option1" checked>选项1</checkbox>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 单个复选框
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<checkbox value="agree" :checked="isAgreed" @tap="handleChange">
|
||||
我已阅读并同意协议
|
||||
</checkbox>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isAgreed: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.isAgreed = e.detail.value.length > 0
|
||||
console.log('选中状态', this.isAgreed)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 复选框组
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<checkbox-group @change="handleGroupChange">
|
||||
<label v-for="item in options" :key="item.value" class="checkbox-item">
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
<text>{{ item.label }}</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
<text>已选择：{{ selectedValues.join(', ') }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ value: 'option1', label: '选项1', checked: false },
|
||||
{ value: 'option2', label: '选项2', checked: false },
|
||||
{ value: 'option3', label: '选项3', checked: false }
|
||||
],
|
||||
selectedValues: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleGroupChange(e) {
|
||||
this.selectedValues = e.detail.value
|
||||
console.log('选中的值', this.selectedValues)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 全选功能
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<checkbox-group @change="handleGroupChange">
|
||||
<label class="checkbox-item">
|
||||
<checkbox
|
||||
value="all"
|
||||
:checked="isAllSelected"
|
||||
@tap="handleSelectAll"
|
||||
/>
|
||||
<text>全选</text>
|
||||
</label>
|
||||
<label
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="checkbox-item"
|
||||
>
|
||||
<checkbox
|
||||
:value="item.id"
|
||||
:checked="item.checked"
|
||||
/>
|
||||
<text>{{ item.name }}</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ id: '1', name: '项目1', checked: false },
|
||||
{ id: '2', name: '项目2', checked: false },
|
||||
{ id: '3', name: '项目3', checked: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isAllSelected() {
|
||||
return this.list.every(item => item.checked)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectAll() {
|
||||
const allSelected = this.isAllSelected
|
||||
this.list.forEach(item => {
|
||||
item.checked = !allSelected
|
||||
})
|
||||
},
|
||||
handleGroupChange(e) {
|
||||
const selectedIds = e.detail.value.filter(id => id !== 'all')
|
||||
this.list.forEach(item => {
|
||||
item.checked = selectedIds.includes(item.id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 在表单中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<view class="form-item">
|
||||
<text>兴趣爱好：</text>
|
||||
<checkbox-group name="hobbies" @change="handleHobbiesChange">
|
||||
<label v-for="hobby in hobbies" :key="hobby.value" class="checkbox-item">
|
||||
<checkbox :value="hobby.value" />
|
||||
<text>{{ hobby.label }}</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<button form-type="submit">提交</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hobbies: [
|
||||
{ value: 'reading', label: '阅读' },
|
||||
{ value: 'music', label: '音乐' },
|
||||
{ value: 'sports', label: '运动' },
|
||||
{ value: 'travel', label: '旅行' }
|
||||
],
|
||||
selectedHobbies: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleHobbiesChange(e) {
|
||||
this.selectedHobbies = e.detail.value
|
||||
},
|
||||
handleSubmit(e) {
|
||||
console.log('选中的兴趣爱好', this.selectedHobbies)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| value | String | - | checkbox 标识，选中时触发 change 事件，并携带 value |
|
||||
| checked | Boolean | false | 当前是否选中 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| color | String | #007aff | checkbox 的颜色 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要配合 `checkbox-group` 使用才能获取选中的值
|
||||
2. `value` 用于标识不同的选项
|
||||
3. `checked` 属性控制选中状态
|
||||
4. 可以通过 `@change` 事件监听变化
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html
|
||||
- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html
|
||||
@@ -0,0 +1,321 @@
|
||||
# form 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/form.html
|
||||
|
||||
## 概述
|
||||
|
||||
`form` 是表单组件，用于收集用户输入的数据。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<input name="username" placeholder="用户名" />
|
||||
<button form-type="submit">提交</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
console.log('表单数据', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本表单
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<view class="form-item">
|
||||
<text>用户名：</text>
|
||||
<input name="username" placeholder="请输入用户名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text>密码：</text>
|
||||
<input name="password" type="password" placeholder="请输入密码" />
|
||||
</view>
|
||||
<button form-type="submit">提交</button>
|
||||
<button form-type="reset">重置</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
const formData = e.detail.value
|
||||
console.log('表单数据', formData)
|
||||
// { username: 'xxx', password: 'xxx' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 完整登录表单
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleLogin">
|
||||
<view class="form-item">
|
||||
<input
|
||||
name="username"
|
||||
placeholder="请输入用户名"
|
||||
v-model="username"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<input
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
v-model="password"
|
||||
/>
|
||||
</view>
|
||||
<button form-type="submit" :loading="loading">登录</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLogin(e) {
|
||||
const formData = e.detail.value
|
||||
this.loading = true
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/login',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
success: (res) => {
|
||||
if (res.data.success) {
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 表单验证
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<view class="form-item">
|
||||
<input
|
||||
name="email"
|
||||
type="text"
|
||||
placeholder="请输入邮箱"
|
||||
v-model="email"
|
||||
/>
|
||||
<text v-if="emailError" class="error">{{ emailError }}</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<input
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
v-model="phone"
|
||||
/>
|
||||
<text v-if="phoneError" class="error">{{ phoneError }}</text>
|
||||
</view>
|
||||
<button form-type="submit">提交</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
phone: '',
|
||||
emailError: '',
|
||||
phoneError: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateEmail() {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!this.email) {
|
||||
this.emailError = '邮箱不能为空'
|
||||
} else if (!emailRegex.test(this.email)) {
|
||||
this.emailError = '邮箱格式不正确'
|
||||
} else {
|
||||
this.emailError = ''
|
||||
}
|
||||
},
|
||||
validatePhone() {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
if (!this.phone) {
|
||||
this.phoneError = '手机号不能为空'
|
||||
} else if (!phoneRegex.test(this.phone)) {
|
||||
this.phoneError = '手机号格式不正确'
|
||||
} else {
|
||||
this.phoneError = ''
|
||||
}
|
||||
},
|
||||
handleSubmit(e) {
|
||||
this.validateEmail()
|
||||
this.validatePhone()
|
||||
|
||||
if (!this.emailError && !this.phoneError) {
|
||||
const formData = e.detail.value
|
||||
console.log('表单数据', formData)
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 复杂表单
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<view class="form-item">
|
||||
<text>姓名：</text>
|
||||
<input name="name" placeholder="请输入姓名" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text>性别：</text>
|
||||
<radio-group name="gender">
|
||||
<label>
|
||||
<radio value="male" /> 男
|
||||
</label>
|
||||
<label>
|
||||
<radio value="female" /> 女
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text>兴趣爱好：</text>
|
||||
<checkbox-group name="hobbies">
|
||||
<label>
|
||||
<checkbox value="reading" /> 阅读
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="music" /> 音乐
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="sports" /> 运动
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text>城市：</text>
|
||||
<picker mode="region" name="city">
|
||||
<view>请选择城市</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<button form-type="submit">提交</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
console.log('表单数据', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| report-submit | Boolean | false | 是否返回 formId 用于发送模板消息 |
|
||||
|
||||
## 事件说明
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
|--------|------|--------|
|
||||
| @submit | 携带 form 中的数据触发 submit 事件 | e.detail.value 包含所有表单数据 |
|
||||
| @reset | 表单重置时会触发 reset 事件 | - |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 表单内的组件需要设置 `name` 属性才能被收集
|
||||
2. `form-type="submit"` 的按钮会触发表单提交
|
||||
3. `form-type="reset"` 的按钮会重置表单
|
||||
4. 可以通过 `e.detail.value` 获取所有表单数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/form.html
|
||||
- **输入框**: https://doc.dcloud.net.cn/uni-app-x/component/input.html
|
||||
@@ -0,0 +1,160 @@
|
||||
# icon 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/icon.html
|
||||
|
||||
## 概述
|
||||
|
||||
`icon` 是图标组件，用于显示各种图标。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<icon type="success" size="20" color="#4cd964"></icon>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 不同类型的图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="icon-item">
|
||||
<icon type="success" size="26" color="#4cd964"></icon>
|
||||
<text>成功</text>
|
||||
</view>
|
||||
<view class="icon-item">
|
||||
<icon type="info" size="26" color="#909399"></icon>
|
||||
<text>信息</text>
|
||||
</view>
|
||||
<view class="icon-item">
|
||||
<icon type="warn" size="26" color="#ff9500"></icon>
|
||||
<text>警告</text>
|
||||
</view>
|
||||
<view class="icon-item">
|
||||
<icon type="waiting" size="26" color="#007aff"></icon>
|
||||
<text>等待</text>
|
||||
</view>
|
||||
<view class="icon-item">
|
||||
<icon type="clear" size="26" color="#ff3b30"></icon>
|
||||
<text>清除</text>
|
||||
</view>
|
||||
<view class="icon-item">
|
||||
<icon type="search" size="26" color="#333"></icon>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
}
|
||||
.icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 不同大小的图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<icon type="success" size="20" color="#4cd964"></icon>
|
||||
<icon type="success" size="30" color="#4cd964"></icon>
|
||||
<icon type="success" size="40" color="#4cd964"></icon>
|
||||
<icon type="success" size="50" color="#4cd964"></icon>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 不同颜色的图标
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<icon type="success" size="30" color="#4cd964"></icon>
|
||||
<icon type="success" size="30" color="#007aff"></icon>
|
||||
<icon type="success" size="30" color="#ff3b30"></icon>
|
||||
<icon type="success" size="30" color="#ff9500"></icon>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 4: 在按钮中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button class="icon-button">
|
||||
<icon type="search" size="20" color="#fff"></icon>
|
||||
<text>搜索</text>
|
||||
</button>
|
||||
<button class="icon-button">
|
||||
<icon type="success" size="20" color="#fff"></icon>
|
||||
<text>确认</text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| type | String | - | icon 的类型，可选值：success、info、warn、waiting、clear、search 等 |
|
||||
| size | Number | 23 | icon 的大小，单位 px |
|
||||
| color | String | - | icon 的颜色，同 CSS 的 color |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `type` 的值在不同平台可能不同
|
||||
2. 建议使用 uni-icons 组件库获得更多图标
|
||||
3. `size` 单位为 px，不是 rpx
|
||||
4. `color` 可以使用任何 CSS 颜色值
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/icon.html
|
||||
- **uni-icons**: https://ext.dcloud.net.cn/plugin?id=28
|
||||
@@ -0,0 +1,373 @@
|
||||
# image 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/image.html
|
||||
|
||||
## 概述
|
||||
|
||||
`image` 是图片组件，用于显示图片。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<image src="/static/logo.png" mode="aspectFit"></image>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 图片显示模式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="image-item">
|
||||
<text>scaleToFill（默认）</text>
|
||||
<image
|
||||
src="/static/logo.png"
|
||||
mode="scaleToFill"
|
||||
style="width: 200px; height: 200px;"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="image-item">
|
||||
<text>aspectFit</text>
|
||||
<image
|
||||
src="/static/logo.png"
|
||||
mode="aspectFit"
|
||||
style="width: 200px; height: 200px;"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="image-item">
|
||||
<text>aspectFill</text>
|
||||
<image
|
||||
src="/static/logo.png"
|
||||
mode="aspectFill"
|
||||
style="width: 200px; height: 200px;"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="image-item">
|
||||
<text>widthFix</text>
|
||||
<image
|
||||
src="/static/logo.png"
|
||||
mode="widthFix"
|
||||
style="width: 200px;"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.image-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 图片列表
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="image-list">
|
||||
<image
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
:src="item"
|
||||
mode="aspectFill"
|
||||
class="image-item"
|
||||
@click="previewImage(index)"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://example.com/image1.jpg',
|
||||
'https://example.com/image2.jpg',
|
||||
'https://example.com/image3.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage(index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.imageList
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.image-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 图片懒加载
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<image
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
:src="item"
|
||||
mode="aspectFill"
|
||||
lazy-load
|
||||
class="lazy-image"
|
||||
></image>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://example.com/image1.jpg',
|
||||
'https://example.com/image2.jpg',
|
||||
// ... 更多图片
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-view {
|
||||
height: 100vh;
|
||||
}
|
||||
.lazy-image {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 图片加载和错误处理
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<image
|
||||
:src="imageUrl"
|
||||
mode="aspectFit"
|
||||
@load="handleLoad"
|
||||
@error="handleError"
|
||||
:class="{ 'error-image': hasError }"
|
||||
></image>
|
||||
<text v-if="hasError" class="error-text">图片加载失败</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://example.com/image.jpg',
|
||||
hasError: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLoad(e) {
|
||||
console.log('图片加载成功', e.detail)
|
||||
this.hasError = false
|
||||
},
|
||||
handleError(e) {
|
||||
console.error('图片加载失败', e.detail)
|
||||
this.hasError = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error-image {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.error-text {
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 占位图和加载状态
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="image-wrapper">
|
||||
<image
|
||||
v-if="!imageLoaded"
|
||||
src="/static/placeholder.png"
|
||||
mode="aspectFit"
|
||||
class="placeholder"
|
||||
></image>
|
||||
<image
|
||||
:src="imageUrl"
|
||||
mode="aspectFit"
|
||||
@load="imageLoaded = true"
|
||||
:class="{ 'hidden': !imageLoaded }"
|
||||
class="main-image"
|
||||
></image>
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://example.com/image.jpg',
|
||||
imageLoaded: false,
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLoad() {
|
||||
this.imageLoaded = true
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.main-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 6: 网络图片和本地图片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 本地图片 -->
|
||||
<image src="/static/logo.png" mode="aspectFit"></image>
|
||||
|
||||
<!-- 网络图片 -->
|
||||
<image
|
||||
src="https://example.com/image.jpg"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
|
||||
<!-- 动态图片 -->
|
||||
<image
|
||||
:src="dynamicImageUrl"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicImageUrl: 'https://example.com/image.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| src | String | - | 图片资源地址 |
|
||||
| mode | String | scaleToFill | 图片裁剪、缩放的模式 |
|
||||
| lazy-load | Boolean | false | 图片懒加载 |
|
||||
| webp | Boolean | false | 是否启用 webp 格式 |
|
||||
|
||||
## mode 可选值
|
||||
|
||||
| 值 | 说明 |
|
||||
|----|------|
|
||||
| scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
|
||||
| aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来 |
|
||||
| aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来 |
|
||||
| widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
|
||||
| heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 |
|
||||
| top | 不缩放图片，只显示图片的顶部区域 |
|
||||
| bottom | 不缩放图片，只显示图片的底部区域 |
|
||||
| center | 不缩放图片，只显示图片的中间区域 |
|
||||
| left | 不缩放图片，只显示图片的左边区域 |
|
||||
| right | 不缩放图片，只显示图片的右边区域 |
|
||||
| top left | 不缩放图片，只显示图片的左上边区域 |
|
||||
| top right | 不缩放图片，只显示图片的右上边区域 |
|
||||
| bottom left | 不缩放图片，只显示图片的左下边区域 |
|
||||
| bottom right | 不缩放图片，只显示图片的右下边区域 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 网络图片需要配置合法域名
|
||||
2. 本地图片路径需要使用 `/static/` 开头
|
||||
3. `lazy-load` 只对 page 和 scroll-view 下的 image 有效
|
||||
4. 建议使用合适的 `mode` 值以优化显示效果
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/image.html
|
||||
- **预览图片**: https://doc.dcloud.net.cn/uni-app-x/api/media/image.html#previewimage
|
||||
@@ -0,0 +1,331 @@
|
||||
# input 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html
|
||||
|
||||
## 概述
|
||||
|
||||
`input` 是单行输入框组件，用于用户输入文本。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<input v-model="value" placeholder="请输入内容" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本输入框
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input
|
||||
v-model="inputValue"
|
||||
placeholder="请输入内容"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<text>输入的内容：{{ inputValue }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputValue: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
this.inputValue = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 不同类型的输入框
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input type="text" placeholder="文本输入" />
|
||||
<input type="number" placeholder="数字输入" />
|
||||
<input type="digit" placeholder="带小数点的数字" />
|
||||
<input type="idcard" placeholder="身份证号" />
|
||||
<input type="tel" placeholder="电话号码" />
|
||||
<input type="safe-password" placeholder="安全密码" />
|
||||
<input type="nickname" placeholder="昵称" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 3: 密码输入框
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input
|
||||
type="text"
|
||||
password
|
||||
placeholder="请输入密码"
|
||||
v-model="password"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
:password="!showPassword"
|
||||
placeholder="显示/隐藏密码"
|
||||
v-model="password2"
|
||||
/>
|
||||
<button @click="showPassword = !showPassword">
|
||||
{{ showPassword ? '隐藏' : '显示' }}密码
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
password: '',
|
||||
password2: '',
|
||||
showPassword: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 限制输入长度
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input
|
||||
v-model="value"
|
||||
placeholder="最多输入10个字符"
|
||||
maxlength="10"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<text>已输入：{{ value.length }}/10</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
this.value = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 获取焦点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input
|
||||
ref="input"
|
||||
v-model="value"
|
||||
placeholder="点击按钮获取焦点"
|
||||
:focus="isFocused"
|
||||
/>
|
||||
<button @click="focusInput">获取焦点</button>
|
||||
<button @click="blurInput">失去焦点</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
isFocused: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
focusInput() {
|
||||
this.isFocused = true
|
||||
// 或使用组件方法
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
blurInput() {
|
||||
this.isFocused = false
|
||||
// 或使用组件方法
|
||||
this.$refs.input.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 6: 确认按钮
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input
|
||||
v-model="value"
|
||||
placeholder="输入后点击键盘确认"
|
||||
confirm-type="search"
|
||||
@confirm="handleConfirm"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm(e) {
|
||||
console.log('确认输入', e.detail.value)
|
||||
uni.showToast({
|
||||
title: '搜索：' + e.detail.value,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 7: 表单验证
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input
|
||||
v-model="email"
|
||||
type="text"
|
||||
placeholder="请输入邮箱"
|
||||
@blur="validateEmail"
|
||||
/>
|
||||
<text v-if="emailError" class="error">{{ emailError }}</text>
|
||||
|
||||
<input
|
||||
v-model="phone"
|
||||
type="tel"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
@blur="validatePhone"
|
||||
/>
|
||||
<text v-if="phoneError" class="error">{{ phoneError }}</text>
|
||||
|
||||
<button @click="submit">提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
phone: '',
|
||||
emailError: '',
|
||||
phoneError: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateEmail() {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (this.email && !emailRegex.test(this.email)) {
|
||||
this.emailError = '邮箱格式不正确'
|
||||
} else {
|
||||
this.emailError = ''
|
||||
}
|
||||
},
|
||||
validatePhone() {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
if (this.phone && !phoneRegex.test(this.phone)) {
|
||||
this.phoneError = '手机号格式不正确'
|
||||
} else {
|
||||
this.phoneError = ''
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
this.validateEmail()
|
||||
this.validatePhone()
|
||||
if (!this.emailError && !this.phoneError) {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| value | String | - | 输入框的初始内容 |
|
||||
| type | String | text | input 的类型，可选值：text、number、digit、idcard、tel、safe-password、nickname |
|
||||
| password | Boolean | false | 是否是密码类型 |
|
||||
| placeholder | String | - | 输入框为空时占位符 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| maxlength | Number | 140 | 最大输入长度，-1 表示不限制 |
|
||||
| focus | Boolean | false | 获取焦点 |
|
||||
| confirm-type | String | done | 设置键盘右下角按钮的文字 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `v-model` 是双向绑定的推荐方式
|
||||
2. `maxlength` 设置为 -1 时不限制最大长度
|
||||
3. `focus` 属性在 H5 和 App 上需要特殊处理
|
||||
4. `confirm-type` 在不同平台支持的值可能不同
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/input.html
|
||||
- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html
|
||||
@@ -0,0 +1,262 @@
|
||||
# label 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/label.html
|
||||
|
||||
## 概述
|
||||
|
||||
`label` 是标签组件，用于改进表单组件的可用性。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<label>
|
||||
<checkbox value="option1" />
|
||||
<text>选项1</text>
|
||||
</label>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 配合 checkbox 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<checkbox-group @change="handleChange">
|
||||
<label class="checkbox-label">
|
||||
<checkbox value="option1" />
|
||||
<text>选项1</text>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<checkbox value="option2" />
|
||||
<text>选项2</text>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<checkbox value="option3" />
|
||||
<text>选项3</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
console.log('选中的值', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 配合 radio 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<radio-group @change="handleChange">
|
||||
<label class="radio-label">
|
||||
<radio value="male" />
|
||||
<text>男</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="female" />
|
||||
<text>女</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
console.log('选中的值', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 配合 switch 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<label class="switch-label">
|
||||
<text>开启通知</text>
|
||||
<switch :checked="notifyEnabled" @change="handleSwitchChange" />
|
||||
</label>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
notifyEnabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSwitchChange(e) {
|
||||
this.notifyEnabled = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.switch-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 配合 input 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<label class="input-label">
|
||||
<text>用户名：</text>
|
||||
<input v-model="username" placeholder="请输入用户名" />
|
||||
</label>
|
||||
<label class="input-label">
|
||||
<text>密码：</text>
|
||||
<input v-model="password" type="password" placeholder="请输入密码" />
|
||||
</label>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.input-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 表单列表
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form-list">
|
||||
<label class="form-item">
|
||||
<text class="label-text">同意协议</text>
|
||||
<checkbox value="agree" />
|
||||
</label>
|
||||
<label class="form-item">
|
||||
<text class="label-text">接收通知</text>
|
||||
<switch :checked="notifyEnabled" @change="notifyEnabled = $event.detail.value" />
|
||||
</label>
|
||||
<label class="form-item">
|
||||
<text class="label-text">性别</text>
|
||||
<radio-group>
|
||||
<radio value="male" />男
|
||||
<radio value="female" />女
|
||||
</radio-group>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
notifyEnabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-list {
|
||||
padding: 20px;
|
||||
}
|
||||
.form-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.label-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| for | String | - | 绑定控件的 id |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `label` 用于改进表单组件的可用性
|
||||
2. 点击 `label` 内的文本可以触发关联的表单控件
|
||||
3. 可以配合 `checkbox`、`radio`、`switch`、`input` 等使用
|
||||
4. 建议使用 `label` 包裹表单控件和文本
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/label.html
|
||||
- **复选框**: https://doc.dcloud.net.cn/uni-app-x/component/checkbox.html
|
||||
- **单选框**: https://doc.dcloud.net.cn/uni-app-x/component/radio.html
|
||||
@@ -0,0 +1,326 @@
|
||||
# map 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/map.html
|
||||
|
||||
## 概述
|
||||
|
||||
`map` 是地图组件，用于显示地图和标记位置。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="markers"
|
||||
></map>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
title: '天安门'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本地图
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:scale="scale"
|
||||
class="map"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
scale: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 地图标记
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="markers"
|
||||
:show-location="true"
|
||||
class="map"
|
||||
@markertap="handleMarkerTap"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
markers: [
|
||||
{
|
||||
id: 1,
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
title: '天安门',
|
||||
iconPath: '/static/marker.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
latitude: 39.918823,
|
||||
longitude: 116.407470,
|
||||
title: '故宫',
|
||||
iconPath: '/static/marker.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMarkerTap(e) {
|
||||
const markerId = e.detail.markerId
|
||||
const marker = this.markers.find(m => m.id === markerId)
|
||||
if (marker) {
|
||||
uni.showToast({
|
||||
title: marker.title,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 显示当前位置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:show-location="true"
|
||||
:enable-zoom="true"
|
||||
class="map"
|
||||
></map>
|
||||
<button @click="getCurrentLocation">获取当前位置</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getCurrentLocation()
|
||||
},
|
||||
methods: {
|
||||
getCurrentLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取位置失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 地图控件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:controls="controls"
|
||||
:show-location="true"
|
||||
class="map"
|
||||
@controltap="handleControlTap"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
controls: [
|
||||
{
|
||||
id: 1,
|
||||
iconPath: '/static/location.png',
|
||||
position: {
|
||||
left: 10,
|
||||
top: 10,
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
clickable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleControlTap(e) {
|
||||
const controlId = e.detail.controlId
|
||||
if (controlId === 1) {
|
||||
this.getCurrentLocation()
|
||||
}
|
||||
},
|
||||
getCurrentLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 地图事件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<map
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:markers="markers"
|
||||
class="map"
|
||||
@tap="handleMapTap"
|
||||
@regionchange="handleRegionChange"
|
||||
@updated="handleMapUpdated"
|
||||
></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.908823,
|
||||
longitude: 116.397470,
|
||||
markers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMapTap(e) {
|
||||
console.log('地图点击', e.detail)
|
||||
// 添加标记
|
||||
const newMarker = {
|
||||
id: Date.now(),
|
||||
latitude: e.detail.latitude,
|
||||
longitude: e.detail.longitude,
|
||||
title: '新位置'
|
||||
}
|
||||
this.markers.push(newMarker)
|
||||
},
|
||||
handleRegionChange(e) {
|
||||
console.log('地图区域变化', e.detail)
|
||||
},
|
||||
handleMapUpdated() {
|
||||
console.log('地图更新完成')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| latitude | Number | - | 中心纬度 |
|
||||
| longitude | Number | - | 中心经度 |
|
||||
| scale | Number | 16 | 缩放级别，取值范围为 5-18 |
|
||||
| markers | Array | [] | 标记点 |
|
||||
| show-location | Boolean | false | 显示带有方向的当前定位点 |
|
||||
| controls | Array | [] | 控件 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要使用 `gcj02` 类型的坐标
|
||||
2. `markers` 数组中的每个标记需要唯一 `id`
|
||||
3. `show-location` 可以显示当前位置
|
||||
4. 可以通过事件监听地图交互
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/map.html
|
||||
- **获取位置**: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation
|
||||
@@ -0,0 +1,204 @@
|
||||
# navigator 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/navigator.html
|
||||
|
||||
## 概述
|
||||
|
||||
`navigator` 是页面链接组件，用于页面跳转。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<navigator url="/pages/detail/detail">跳转到详情页</navigator>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本跳转
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<navigator url="/pages/detail/detail">跳转到详情页</navigator>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 2: 带参数跳转
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<navigator url="/pages/detail/detail?id=123&name=test">
|
||||
跳转到详情页
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 3: 不同跳转方式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 保留当前页面，可以返回 -->
|
||||
<navigator url="/pages/detail/detail" open-type="navigate">
|
||||
保留页面跳转
|
||||
</navigator>
|
||||
|
||||
<!-- 关闭当前页面，不能返回 -->
|
||||
<navigator url="/pages/detail/detail" open-type="redirect">
|
||||
关闭页面跳转
|
||||
</navigator>
|
||||
|
||||
<!-- 关闭所有页面，重新启动 -->
|
||||
<navigator url="/pages/index/index" open-type="reLaunch">
|
||||
重新启动
|
||||
</navigator>
|
||||
|
||||
<!-- 跳转到 tabBar 页面 -->
|
||||
<navigator url="/pages/index/index" open-type="switchTab">
|
||||
切换到首页
|
||||
</navigator>
|
||||
|
||||
<!-- 返回上一页 -->
|
||||
<navigator open-type="navigateBack" :delta="1">
|
||||
返回上一页
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 4: 列表跳转
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<navigator :url="`/pages/detail/detail?id=${item.id}`">
|
||||
<text>{{ item.title }}</text>
|
||||
<text class="arrow">></text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ id: 1, title: '项目1' },
|
||||
{ id: 2, title: '项目2' },
|
||||
{ id: 3, title: '项目3' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-item {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.arrow {
|
||||
float: right;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 条件跳转
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<navigator
|
||||
v-if="isLogin"
|
||||
url="/pages/user/user"
|
||||
open-type="navigate"
|
||||
>
|
||||
个人中心
|
||||
</navigator>
|
||||
<navigator
|
||||
v-else
|
||||
url="/pages/login/login"
|
||||
open-type="navigate"
|
||||
>
|
||||
登录
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLogin: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.checkLogin()
|
||||
},
|
||||
methods: {
|
||||
checkLogin() {
|
||||
const token = uni.getStorageSync('token')
|
||||
this.isLogin = !!token
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| url | String | - | 应用内的跳转链接 |
|
||||
| open-type | String | navigate | 跳转方式，可选值：navigate、redirect、switchTab、reLaunch、navigateBack |
|
||||
| delta | Number | 1 | 当 open-type 为 navigateBack 时有效，表示返回的页面数 |
|
||||
|
||||
## open-type 可选值
|
||||
|
||||
| 值 | 说明 |
|
||||
|----|------|
|
||||
| navigate | 保留当前页面，跳转到应用内的某个页面 |
|
||||
| redirect | 关闭当前页面，跳转到应用内的某个页面 |
|
||||
| switchTab | 跳转到 tabBar 页面 |
|
||||
| reLaunch | 关闭所有页面，打开到应用内的某个页面 |
|
||||
| navigateBack | 关闭当前页面，返回上一页面或多级页面 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `url` 必须以 `/` 开头
|
||||
2. `open-type` 为 `switchTab` 时，只能跳转到 tabBar 页面
|
||||
3. `open-type` 为 `navigateBack` 时，不需要 `url` 参数
|
||||
4. 可以通过 `delta` 控制返回的页面数
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/navigator.html
|
||||
- **页面路由**: https://doc.dcloud.net.cn/uni-app-x/api/router.html
|
||||
@@ -0,0 +1,290 @@
|
||||
# picker 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/picker.html
|
||||
|
||||
## 概述
|
||||
|
||||
`picker` 是滚动选择器组件，支持普通选择器、多列选择器、时间选择器、日期选择器等。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<picker mode="selector" :range="options" @change="handleChange">
|
||||
<view>请选择</view>
|
||||
</picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: ['选项1', '选项2', '选项3']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
console.log('选中的索引', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 普通选择器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="options"
|
||||
:value="selectedIndex"
|
||||
@change="handleChange"
|
||||
>
|
||||
<view class="picker-view">
|
||||
<text>{{ selectedText || '请选择' }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: ['选项1', '选项2', '选项3', '选项4'],
|
||||
selectedIndex: 0,
|
||||
selectedText: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.selectedIndex = e.detail.value
|
||||
this.selectedText = this.options[e.detail.value]
|
||||
console.log('选中的值', this.selectedText)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.picker-view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.arrow {
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 多列选择器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<picker
|
||||
mode="multiSelector"
|
||||
:range="multiArray"
|
||||
:value="multiIndex"
|
||||
@change="handleMultiChange"
|
||||
@columnchange="handleColumnChange"
|
||||
>
|
||||
<view class="picker-view">
|
||||
<text>{{ displayText || '请选择省市区' }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
multiArray: [
|
||||
['北京', '上海', '广东'],
|
||||
['朝阳区', '海淀区', '丰台区'],
|
||||
['街道1', '街道2', '街道3']
|
||||
],
|
||||
multiIndex: [0, 0, 0],
|
||||
displayText: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMultiChange(e) {
|
||||
this.multiIndex = e.detail.value
|
||||
this.updateDisplayText()
|
||||
},
|
||||
handleColumnChange(e) {
|
||||
// 当某一列改变时，可以更新其他列的数据
|
||||
const column = e.detail.column
|
||||
const row = e.detail.value
|
||||
this.multiIndex[column] = row
|
||||
this.updateDisplayText()
|
||||
},
|
||||
updateDisplayText() {
|
||||
this.displayText = this.multiArray.map((arr, index) => {
|
||||
return arr[this.multiIndex[index]]
|
||||
}).join(' ')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 时间选择器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<picker
|
||||
mode="time"
|
||||
:value="time"
|
||||
@change="handleTimeChange"
|
||||
>
|
||||
<view class="picker-view">
|
||||
<text>{{ time || '请选择时间' }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTimeChange(e) {
|
||||
this.time = e.detail.value
|
||||
console.log('选择的时间', this.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 日期选择器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="date"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@change="handleDateChange"
|
||||
>
|
||||
<view class="picker-view">
|
||||
<text>{{ date || '请选择日期' }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2030-12-31'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDateChange(e) {
|
||||
this.date = e.detail.value
|
||||
console.log('选择的日期', this.date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 地区选择器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<picker
|
||||
mode="region"
|
||||
:value="region"
|
||||
@change="handleRegionChange"
|
||||
>
|
||||
<view class="picker-view">
|
||||
<text>{{ regionText || '请选择地区' }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
region: [],
|
||||
regionText: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRegionChange(e) {
|
||||
this.region = e.detail.value
|
||||
this.regionText = e.detail.value.join(' ')
|
||||
console.log('选择的地区', this.region)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| mode | String | selector | 选择器类型，可选值：selector、multiSelector、time、date、region |
|
||||
| range | Array | [] | mode 为 selector 或 multiSelector 时，range 有效 |
|
||||
| value | Number/Array | 0 | 表示选择了 range 中的第几个（下标从 0 开始） |
|
||||
| start | String | - | 有效值范围的开始，字符串格式为 "YYYY-MM-DD" |
|
||||
| end | String | - | 有效值范围的结束，字符串格式为 "YYYY-MM-DD" |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `mode` 不同，`range` 和 `value` 的格式也不同
|
||||
2. 时间选择器的 `value` 格式为 "HH:mm"
|
||||
3. 日期选择器的 `value` 格式为 "YYYY-MM-DD"
|
||||
4. 多列选择器需要配合 `@columnchange` 事件处理联动
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/picker.html
|
||||
- **滚动选择器**: https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html
|
||||
@@ -0,0 +1,209 @@
|
||||
# progress 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/progress.html
|
||||
|
||||
## 概述
|
||||
|
||||
`progress` 是进度条组件，用于显示任务进度。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<progress :percent="50"></progress>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本进度条
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<progress :percent="progress" />
|
||||
<text>{{ progress }}%</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progress: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 显示进度百分比
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<progress :percent="progress" :show-info="true" />
|
||||
<button @click="increaseProgress">增加进度</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progress: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
increaseProgress() {
|
||||
if (this.progress < 100) {
|
||||
this.progress += 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 不同颜色
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<progress :percent="50" color="#007aff" />
|
||||
<progress :percent="60" color="#4cd964" />
|
||||
<progress :percent="70" color="#ff3b30" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 4: 文件上传进度
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<progress :percent="uploadProgress" :show-info="true" />
|
||||
<button @click="uploadFile">上传文件</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploadProgress: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadFile() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
this.uploadProgress = 0
|
||||
|
||||
// 模拟上传进度
|
||||
const interval = setInterval(() => {
|
||||
this.uploadProgress += 10
|
||||
if (this.uploadProgress >= 100) {
|
||||
clearInterval(interval)
|
||||
uni.showToast({
|
||||
title: '上传完成',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}, 200)
|
||||
|
||||
// 实际上传
|
||||
uni.uploadFile({
|
||||
url: 'https://api.example.com/upload',
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
success: () => {
|
||||
clearInterval(interval)
|
||||
this.uploadProgress = 100
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 动画进度条
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<progress
|
||||
:percent="progress"
|
||||
:active="true"
|
||||
:active-color="activeColor"
|
||||
/>
|
||||
<button @click="startProgress">开始进度</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
activeColor: '#007aff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startProgress() {
|
||||
this.progress = 0
|
||||
const interval = setInterval(() => {
|
||||
this.progress += 2
|
||||
if (this.progress >= 100) {
|
||||
clearInterval(interval)
|
||||
this.activeColor = '#4cd964'
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| percent | Number | 0 | 百分比 0~100 |
|
||||
| show-info | Boolean | false | 在进度条右侧显示百分比 |
|
||||
| stroke-width | Number | 6 | 进度条线的宽度，单位 px |
|
||||
| active | Boolean | false | 进度条是否显示动画 |
|
||||
| active-color | String | #007aff | 已选择的进度条的颜色 |
|
||||
| backgroundColor | String | #ebebeb | 未选择的进度条的颜色 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `percent` 值范围是 0-100
|
||||
2. `show-info` 可以在右侧显示百分比文字
|
||||
3. `active` 可以启用动画效果
|
||||
4. 可以通过 `active-color` 自定义颜色
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/progress.html
|
||||
@@ -0,0 +1,172 @@
|
||||
# radio 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/radio.html
|
||||
|
||||
## 概述
|
||||
|
||||
`radio` 是单项选择器组件，用于单选场景。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<radio value="option1" checked>选项1</radio>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 单个单选框
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<radio value="male" :checked="gender === 'male'" @tap="handleChange">
|
||||
男
|
||||
</radio>
|
||||
<radio value="female" :checked="gender === 'female'" @tap="handleChange">
|
||||
女
|
||||
</radio>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gender: 'male'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.gender = e.detail.value
|
||||
console.log('选择的性别', this.gender)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 单选框组
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<radio-group @change="handleGroupChange">
|
||||
<label v-for="item in options" :key="item.value" class="radio-item">
|
||||
<radio :value="item.value" :checked="selectedValue === item.value" />
|
||||
<text>{{ item.label }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text>已选择：{{ selectedValue }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ value: 'option1', label: '选项1' },
|
||||
{ value: 'option2', label: '选项2' },
|
||||
{ value: 'option3', label: '选项3' }
|
||||
],
|
||||
selectedValue: 'option1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleGroupChange(e) {
|
||||
this.selectedValue = e.detail.value
|
||||
console.log('选中的值', this.selectedValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 在表单中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<form @submit="handleSubmit">
|
||||
<view class="form-item">
|
||||
<text>支付方式：</text>
|
||||
<radio-group name="payment" @change="handlePaymentChange">
|
||||
<label v-for="method in paymentMethods" :key="method.value" class="radio-item">
|
||||
<radio :value="method.value" />
|
||||
<text>{{ method.label }}</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<button form-type="submit">提交</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
paymentMethods: [
|
||||
{ value: 'alipay', label: '支付宝' },
|
||||
{ value: 'wechat', label: '微信支付' },
|
||||
{ value: 'bank', label: '银行卡' }
|
||||
],
|
||||
selectedPayment: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePaymentChange(e) {
|
||||
this.selectedPayment = e.detail.value
|
||||
},
|
||||
handleSubmit(e) {
|
||||
console.log('选择的支付方式', this.selectedPayment)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| value | String | - | radio 标识，选中时触发 change 事件，并携带 value |
|
||||
| checked | Boolean | false | 当前是否选中 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| color | String | #007aff | radio 的颜色 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要配合 `radio-group` 使用才能获取选中的值
|
||||
2. 同一组内只能选择一个选项
|
||||
3. `value` 用于标识不同的选项
|
||||
4. `checked` 属性控制选中状态
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/radio.html
|
||||
- **表单组件**: https://doc.dcloud.net.cn/uni-app-x/component/form.html
|
||||
@@ -0,0 +1,247 @@
|
||||
# rich-text 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html
|
||||
|
||||
## 概述
|
||||
|
||||
`rich-text` 是富文本组件，用于显示富文本内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<rich-text :nodes="htmlContent"></rich-text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
htmlContent: '<div>这是富文本内容</div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 显示 HTML 内容
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<rich-text :nodes="htmlContent"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
htmlContent: `
|
||||
<div>
|
||||
<h1>标题</h1>
|
||||
<p>这是一段<strong>加粗</strong>的文字</p>
|
||||
<p>这是一段<em>斜体</em>的文字</p>
|
||||
<ul>
|
||||
<li>列表项1</li>
|
||||
<li>列表项2</li>
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 显示网络 HTML
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<rich-text :nodes="htmlContent"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
htmlContent: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadHtmlContent()
|
||||
},
|
||||
methods: {
|
||||
loadHtmlContent() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/article',
|
||||
success: (res) => {
|
||||
this.htmlContent = res.data.content
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 使用对象数组
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: [
|
||||
{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
class: 'wrapper',
|
||||
style: 'color: red;'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
text: 'Hello World!'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 混合使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<rich-text :nodes="mixedContent"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mixedContent: [
|
||||
'<p>这是HTML字符串</p>',
|
||||
{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
style: 'color: blue;'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
text: '这是对象节点'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 文章详情页
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="article-header">
|
||||
<text class="title">{{ article.title }}</text>
|
||||
<text class="date">{{ article.date }}</text>
|
||||
</view>
|
||||
<rich-text :nodes="article.content" class="article-content"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
article: {
|
||||
title: '文章标题',
|
||||
date: '2024-01-01',
|
||||
content: `
|
||||
<div>
|
||||
<h2>第一章</h2>
|
||||
<p>这是文章的第一段内容...</p>
|
||||
<img src="https://example.com/image.jpg" />
|
||||
<h2>第二章</h2>
|
||||
<p>这是文章的第二段内容...</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.article-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.article-content {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| nodes | String/Array | - | 节点列表/HTML String |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `nodes` 可以是 HTML 字符串或对象数组
|
||||
2. 不同平台支持的 HTML 标签可能不同
|
||||
3. 建议使用对象数组格式以获得更好的兼容性
|
||||
4. 图片需要配置合法域名
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html
|
||||
@@ -0,0 +1,337 @@
|
||||
# scroll-view 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html
|
||||
|
||||
## 概述
|
||||
|
||||
`scroll-view` 是可滚动视图容器组件，用于实现可滚动的区域。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view v-for="item in list" :key="item.id">{{ item.name }}</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ id: 1, name: '项目1' },
|
||||
{ id: 2, name: '项目2' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-view {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 垂直滚动
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-view"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: Array.from({ length: 50 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `项目 ${i + 1}`
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll(e) {
|
||||
console.log('滚动位置', e.detail.scrollTop)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-view {
|
||||
height: 500px;
|
||||
}
|
||||
.list-item {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 水平滚动
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<scroll-view
|
||||
scroll-x
|
||||
class="scroll-view-horizontal"
|
||||
show-scrollbar
|
||||
>
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="horizontal-item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: Array.from({ length: 20 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `项目 ${i + 1}`
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-view-horizontal {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.horizontal-item {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
padding: 20px;
|
||||
margin-right: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 下拉刷新
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-view"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore"
|
||||
>
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
refreshing: false,
|
||||
list: Array.from({ length: 20 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `项目 ${i + 1}`
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRefresh() {
|
||||
this.refreshing = true
|
||||
// 模拟刷新
|
||||
setTimeout(() => {
|
||||
this.list = Array.from({ length: 20 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `新项目 ${i + 1}`
|
||||
}))
|
||||
this.refreshing = false
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
onRestore() {
|
||||
console.log('刷新恢复')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 上拉加载
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-view"
|
||||
@scrolltolower="loadMore"
|
||||
lower-threshold="50"
|
||||
>
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
page: 1,
|
||||
list: Array.from({ length: 20 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `项目 ${i + 1}`
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
// 模拟加载
|
||||
setTimeout(() => {
|
||||
const newList = Array.from({ length: 20 }, (_, i) => ({
|
||||
id: this.list.length + i + 1,
|
||||
name: `项目 ${this.list.length + i + 1}`
|
||||
}))
|
||||
this.list = [...this.list, ...newList]
|
||||
this.page++
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 滚动到指定位置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="scrollToTop">滚动到顶部</button>
|
||||
<button @click="scrollToBottom">滚动到底部</button>
|
||||
<button @click="scrollToIndex(10)">滚动到第10项</button>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-view"
|
||||
:scroll-top="scrollTop"
|
||||
scroll-with-animation
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id"
|
||||
:id="`item-${index}`"
|
||||
class="list-item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
list: Array.from({ length: 50 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `项目 ${i + 1}`
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollToTop() {
|
||||
this.scrollTop = 0
|
||||
},
|
||||
scrollToBottom() {
|
||||
this.scrollTop = 9999
|
||||
},
|
||||
scrollToIndex(index) {
|
||||
// 假设每项高度为 60px
|
||||
this.scrollTop = index * 60
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| scroll-x | Boolean | false | 允许横向滚动 |
|
||||
| scroll-y | Boolean | false | 允许纵向滚动 |
|
||||
| scroll-top | Number | - | 设置竖向滚动条位置 |
|
||||
| scroll-left | Number | - | 设置横向滚动条位置 |
|
||||
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 |
|
||||
| refresher-triggered | Boolean | false | 设置当前下拉刷新状态 |
|
||||
| lower-threshold | Number | 50 | 距底部/右边多远时触发 scrolltolower 事件 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 使用 `scroll-y` 时必须设置固定高度
|
||||
2. 使用 `scroll-x` 时内容需要设置 `white-space: nowrap`
|
||||
3. 下拉刷新需要设置 `refresher-enabled` 和 `refresher-triggered`
|
||||
4. 上拉加载通过 `@scrolltolower` 事件实现
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html
|
||||
@@ -0,0 +1,262 @@
|
||||
# slider 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/slider.html
|
||||
|
||||
## 概述
|
||||
|
||||
`slider` 是滑动选择器组件，用于选择数值。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<slider :value="50" @change="handleChange" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
console.log('当前值', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本滑动条
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<slider :value="value" @change="handleChange" />
|
||||
<text>当前值：{{ value }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.value = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 设置范围
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<slider
|
||||
:value="value"
|
||||
min="0"
|
||||
max="100"
|
||||
step="5"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<text>当前值：{{ value }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.value = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 音量控制
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="volume-control">
|
||||
<text>音量：{{ volume }}%</text>
|
||||
<slider
|
||||
:value="volume"
|
||||
min="0"
|
||||
max="100"
|
||||
activeColor="#007aff"
|
||||
backgroundColor="#ebebeb"
|
||||
block-color="#007aff"
|
||||
@change="handleVolumeChange"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
volume: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleVolumeChange(e) {
|
||||
this.volume = e.detail.value
|
||||
// 可以在这里控制实际音量
|
||||
console.log('音量设置为', this.volume)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.volume-control {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 亮度控制
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="brightness-control">
|
||||
<text>亮度：{{ brightness }}%</text>
|
||||
<slider
|
||||
:value="brightness"
|
||||
min="0"
|
||||
max="100"
|
||||
@change="handleBrightnessChange"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brightness: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleBrightnessChange(e) {
|
||||
this.brightness = e.detail.value
|
||||
// 设置屏幕亮度
|
||||
uni.setScreenBrightness({
|
||||
value: this.brightness / 100,
|
||||
success: () => {
|
||||
console.log('亮度已设置')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 价格区间选择
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="price-range">
|
||||
<text>价格区间：{{ minPrice }} - {{ maxPrice }}</text>
|
||||
<slider
|
||||
:value="minPrice"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="10"
|
||||
@change="handleMinPriceChange"
|
||||
/>
|
||||
<text>最低价格：{{ minPrice }}</text>
|
||||
<slider
|
||||
:value="maxPrice"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="10"
|
||||
@change="handleMaxPriceChange"
|
||||
/>
|
||||
<text>最高价格：{{ maxPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minPrice: 0,
|
||||
maxPrice: 1000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMinPriceChange(e) {
|
||||
const value = e.detail.value
|
||||
if (value <= this.maxPrice) {
|
||||
this.minPrice = value
|
||||
}
|
||||
},
|
||||
handleMaxPriceChange(e) {
|
||||
const value = e.detail.value
|
||||
if (value >= this.minPrice) {
|
||||
this.maxPrice = value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| min | Number | 0 | 最小值 |
|
||||
| max | Number | 100 | 最大值 |
|
||||
| step | Number | 1 | 步长，取值必须大于 0，并且可被(max - min)整除 |
|
||||
| value | Number | 0 | 当前值 |
|
||||
| activeColor | String | #007aff | 已选择的颜色 |
|
||||
| backgroundColor | String | #ebebeb | 背景条的颜色 |
|
||||
| block-size | Number | 28 | 滑块的大小，取值范围为 12 - 28 |
|
||||
| block-color | String | #ffffff | 滑块的颜色 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `value` 必须在 `min` 和 `max` 之间
|
||||
2. `step` 必须能被 `(max - min)` 整除
|
||||
3. 可以通过 `@change` 事件监听值的变化
|
||||
4. 适合用于音量、亮度、价格区间等场景
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/slider.html
|
||||
@@ -0,0 +1,294 @@
|
||||
# swiper 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/swiper.html
|
||||
|
||||
## 概述
|
||||
|
||||
`swiper` 是滑块视图容器组件，常用于轮播图。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<swiper class="swiper">
|
||||
<swiper-item>
|
||||
<view class="swiper-item">1</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item">2</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item">3</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.swiper {
|
||||
height: 400px;
|
||||
}
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基础轮播图
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<swiper
|
||||
class="swiper"
|
||||
:indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
:duration="500"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||||
<image
|
||||
:src="item.image"
|
||||
mode="aspectFill"
|
||||
class="swiper-image"
|
||||
></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bannerList: [
|
||||
{ image: 'https://example.com/banner1.jpg' },
|
||||
{ image: 'https://example.com/banner2.jpg' },
|
||||
{ image: 'https://example.com/banner3.jpg' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.swiper {
|
||||
height: 400px;
|
||||
}
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 自定义指示点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<swiper
|
||||
class="swiper"
|
||||
:indicator-dots="true"
|
||||
indicator-color="rgba(0, 0, 0, 0.3)"
|
||||
indicator-active-color="#007aff"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in list" :key="index">
|
||||
<view class="swiper-item">{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['页面1', '页面2', '页面3']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 垂直滑动
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<swiper
|
||||
class="swiper-vertical"
|
||||
:vertical="true"
|
||||
:indicator-dots="true"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in list" :key="index">
|
||||
<view class="swiper-item">{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['页面1', '页面2', '页面3']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.swiper-vertical {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 切换事件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<swiper
|
||||
class="swiper"
|
||||
:current="current"
|
||||
@change="handleChange"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in list" :key="index">
|
||||
<view class="swiper-item">{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<text>当前页：{{ current + 1 }} / {{ list.length }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
list: ['页面1', '页面2', '页面3']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.current = e.detail.current
|
||||
console.log('切换到', this.current + 1, '页')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 图片轮播
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<swiper
|
||||
class="swiper"
|
||||
:indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
:circular="true"
|
||||
@change="handleChange"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
@click="handleImageClick(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.url"
|
||||
mode="aspectFill"
|
||||
class="swiper-image"
|
||||
></image>
|
||||
<view class="image-title">{{ item.title }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
{ url: 'https://example.com/image1.jpg', title: '标题1' },
|
||||
{ url: 'https://example.com/image2.jpg', title: '标题2' },
|
||||
{ url: 'https://example.com/image3.jpg', title: '标题3' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
console.log('切换到', e.detail.current)
|
||||
},
|
||||
handleImageClick(item) {
|
||||
uni.previewImage({
|
||||
urls: this.imageList.map(img => img.url),
|
||||
current: item.url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.swiper {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.image-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.5));
|
||||
color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| indicator-dots | Boolean | false | 是否显示面板指示点 |
|
||||
| indicator-color | String | rgba(0, 0, 0, 0.3) | 指示点颜色 |
|
||||
| indicator-active-color | String | #000000 | 当前选中的指示点颜色 |
|
||||
| autoplay | Boolean | false | 是否自动切换 |
|
||||
| interval | Number | 5000 | 自动切换时间间隔 |
|
||||
| duration | Number | 500 | 滑动动画时长 |
|
||||
| circular | Boolean | false | 是否采用衔接滑动 |
|
||||
| vertical | Boolean | false | 滑动方向是否为纵向 |
|
||||
| current | Number | 0 | 当前所在滑块的 index |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须设置固定高度才能正常显示
|
||||
2. `swiper-item` 内只能放置一个根元素
|
||||
3. `circular` 设置为 true 时可以实现循环轮播
|
||||
4. 图片轮播建议使用 `mode="aspectFill"` 保持比例
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/swiper.html
|
||||
@@ -0,0 +1,277 @@
|
||||
# switch 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/switch.html
|
||||
|
||||
## 概述
|
||||
|
||||
`switch` 是开关选择器组件，用于两种状态的切换。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<switch :checked="isChecked" @change="handleChange" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isChecked: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.isChecked = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本开关
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="switch-item">
|
||||
<text>通知开关</text>
|
||||
<switch :checked="notifyEnabled" @change="handleNotifyChange" />
|
||||
</view>
|
||||
<view class="switch-item">
|
||||
<text>声音开关</text>
|
||||
<switch :checked="soundEnabled" @change="handleSoundChange" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
notifyEnabled: true,
|
||||
soundEnabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNotifyChange(e) {
|
||||
this.notifyEnabled = e.detail.value
|
||||
console.log('通知开关', this.notifyEnabled)
|
||||
},
|
||||
handleSoundChange(e) {
|
||||
this.soundEnabled = e.detail.value
|
||||
console.log('声音开关', this.soundEnabled)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.switch-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 自定义颜色
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="switch-item">
|
||||
<text>默认颜色</text>
|
||||
<switch :checked="checked1" @change="checked1 = $event.detail.value" />
|
||||
</view>
|
||||
<view class="switch-item">
|
||||
<text>自定义颜色</text>
|
||||
<switch
|
||||
:checked="checked2"
|
||||
color="#ff3b30"
|
||||
@change="checked2 = $event.detail.value"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 禁用状态
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="switch-item">
|
||||
<text>可用开关</text>
|
||||
<switch :checked="checked" @change="handleChange" />
|
||||
</view>
|
||||
<view class="switch-item">
|
||||
<text>禁用开关</text>
|
||||
<switch :checked="checked" disabled />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
this.checked = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 设置项列表
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="item in settings"
|
||||
:key="item.key"
|
||||
class="setting-item"
|
||||
>
|
||||
<view class="setting-info">
|
||||
<text class="setting-title">{{ item.title }}</text>
|
||||
<text class="setting-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
<switch
|
||||
:checked="item.value"
|
||||
@change="handleSettingChange(item.key, $event.detail.value)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
settings: [
|
||||
{
|
||||
key: 'notify',
|
||||
title: '消息通知',
|
||||
desc: '接收新消息通知',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
key: 'sound',
|
||||
title: '声音提醒',
|
||||
desc: '收到消息时播放声音',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
key: 'vibrate',
|
||||
title: '震动提醒',
|
||||
desc: '收到消息时震动',
|
||||
value: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSettingChange(key, value) {
|
||||
const item = this.settings.find(s => s.key === key)
|
||||
if (item) {
|
||||
item.value = value
|
||||
// 保存设置
|
||||
uni.setStorageSync(`setting_${key}`, value)
|
||||
console.log(`设置 ${key} 已更新为`, value)
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 加载保存的设置
|
||||
this.settings.forEach(item => {
|
||||
const saved = uni.getStorageSync(`setting_${item.key}`)
|
||||
if (saved !== '') {
|
||||
item.value = saved
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.setting-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.setting-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| checked | Boolean | false | 是否选中 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| type | String | switch | 样式类型，可选值：switch、checkbox |
|
||||
| color | String | #007aff | switch 的颜色 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `checked` 属性控制开关状态
|
||||
2. `@change` 事件返回 `e.detail.value` 为布尔值
|
||||
3. 可以通过 `color` 自定义开关颜色
|
||||
4. `disabled` 为 true 时开关不可操作
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/switch.html
|
||||
@@ -0,0 +1,151 @@
|
||||
# text 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/text.html
|
||||
|
||||
## 概述
|
||||
|
||||
`text` 是文本组件，用于显示文本内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<text>这是一段文本</text>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本文本
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>普通文本</text>
|
||||
<text class="bold-text">加粗文本</text>
|
||||
<text class="colored-text">彩色文本</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.bold-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
.colored-text {
|
||||
color: #007aff;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 文本嵌套
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>
|
||||
这是一段
|
||||
<text class="highlight">高亮</text>
|
||||
文本
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.highlight {
|
||||
color: #ff3b30;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 文本选择
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text selectable>这段文本可以选择</text>
|
||||
<text :selectable="false">这段文本不可选择</text>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 示例 4: 文本换行
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="text-wrap">
|
||||
这是一段很长的文本，会自动换行显示。这是一段很长的文本，会自动换行显示。
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.text-wrap {
|
||||
width: 300px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 文本样式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="text-style">样式文本</text>
|
||||
<text class="text-decoration">装饰文本</text>
|
||||
<text class="text-shadow">阴影文本</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.text-style {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.text-decoration {
|
||||
text-decoration: underline;
|
||||
color: #007aff;
|
||||
}
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| selectable | Boolean | false | 文本是否可选 |
|
||||
| user-select | Boolean | false | 文本是否可选（H5） |
|
||||
| space | String | - | 显示连续空格 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `text` 组件内只能嵌套 `text` 组件
|
||||
2. `selectable` 属性用于控制文本是否可选择
|
||||
3. 文本样式通过 CSS 控制
|
||||
4. 建议使用 `text` 组件而不是直接在 `view` 中写文本
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/text.html
|
||||
@@ -0,0 +1,261 @@
|
||||
# textarea 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/textarea.html
|
||||
|
||||
## 概述
|
||||
|
||||
`textarea` 是多行输入框组件，用于输入多行文本。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<textarea v-model="content" placeholder="请输入内容"></textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本多行输入
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<textarea
|
||||
v-model="content"
|
||||
placeholder="请输入内容"
|
||||
@input="handleInput"
|
||||
></textarea>
|
||||
<text>已输入：{{ content.length }} 字</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
this.content = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2: 限制输入长度
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<textarea
|
||||
v-model="content"
|
||||
placeholder="最多输入200字"
|
||||
maxlength="200"
|
||||
@input="handleInput"
|
||||
></textarea>
|
||||
<text class="count">{{ content.length }}/200</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
this.content = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.count {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 自动调整高度
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<textarea
|
||||
v-model="content"
|
||||
placeholder="输入内容会自动调整高度"
|
||||
:auto-height="true"
|
||||
:min-height="100"
|
||||
></textarea>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 固定高度
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<textarea
|
||||
v-model="content"
|
||||
placeholder="固定高度输入框"
|
||||
:show-confirm-bar="true"
|
||||
confirm-type="done"
|
||||
@confirm="handleConfirm"
|
||||
></textarea>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm(e) {
|
||||
console.log('确认输入', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 表单验证
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<textarea
|
||||
v-model="content"
|
||||
placeholder="请输入反馈内容"
|
||||
maxlength="500"
|
||||
@blur="validateContent"
|
||||
></textarea>
|
||||
<text v-if="error" class="error">{{ error }}</text>
|
||||
<text class="count">{{ content.length }}/500</text>
|
||||
<button @click="submit">提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
error: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateContent() {
|
||||
if (this.content.length < 10) {
|
||||
this.error = '内容至少需要10个字符'
|
||||
} else {
|
||||
this.error = ''
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
this.validateContent()
|
||||
if (!this.error && this.content) {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.count {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| value | String | - | 输入框的内容 |
|
||||
| placeholder | String | - | 输入框为空时占位符 |
|
||||
| placeholder-style | String | - | 指定 placeholder 的样式 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| maxlength | Number | 140 | 最大输入长度，-1 表示不限制 |
|
||||
| auto-focus | Boolean | false | 是否自动聚焦 |
|
||||
| focus | Boolean | false | 获取焦点 |
|
||||
| auto-height | Boolean | false | 是否自动增高 |
|
||||
| fixed | Boolean | false | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `v-model` 是双向绑定的推荐方式
|
||||
2. `maxlength` 设置为 -1 时不限制最大长度
|
||||
3. `auto-height` 可以让输入框随内容自动调整高度
|
||||
4. 建议使用 `@input` 事件监听输入变化
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/textarea.html
|
||||
- **单行输入**: https://doc.dcloud.net.cn/uni-app-x/component/input.html
|
||||
@@ -0,0 +1,291 @@
|
||||
# video 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/video.html
|
||||
|
||||
## 概述
|
||||
|
||||
`video` 是视频播放组件，用于播放视频内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<video
|
||||
src="https://example.com/video.mp4"
|
||||
controls
|
||||
></video>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本视频播放
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<video
|
||||
:src="videoSrc"
|
||||
controls
|
||||
class="video-player"
|
||||
></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: 'https://example.com/video.mp4'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 视频播放控制
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<video
|
||||
:src="videoSrc"
|
||||
:controls="showControls"
|
||||
:autoplay="autoplay"
|
||||
:loop="loop"
|
||||
:muted="muted"
|
||||
:poster="poster"
|
||||
@play="handlePlay"
|
||||
@pause="handlePause"
|
||||
@ended="handleEnded"
|
||||
class="video-player"
|
||||
></video>
|
||||
<view class="controls">
|
||||
<button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
|
||||
<button @click="toggleMute">{{ muted ? '取消静音' : '静音' }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: 'https://example.com/video.mp4',
|
||||
showControls: true,
|
||||
autoplay: false,
|
||||
loop: false,
|
||||
muted: false,
|
||||
poster: 'https://example.com/poster.jpg',
|
||||
isPlaying: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePlay() {
|
||||
this.isPlaying = true
|
||||
console.log('视频开始播放')
|
||||
},
|
||||
handlePause() {
|
||||
this.isPlaying = false
|
||||
console.log('视频暂停')
|
||||
},
|
||||
handleEnded() {
|
||||
this.isPlaying = false
|
||||
console.log('视频播放结束')
|
||||
},
|
||||
togglePlay() {
|
||||
// 需要通过 ref 调用视频组件的方法
|
||||
this.$refs.video.play()
|
||||
},
|
||||
toggleMute() {
|
||||
this.muted = !this.muted
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 视频列表
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="(item, index) in videoList"
|
||||
:key="index"
|
||||
class="video-item"
|
||||
>
|
||||
<video
|
||||
:src="item.src"
|
||||
:poster="item.poster"
|
||||
controls
|
||||
class="video-player"
|
||||
@play="handleVideoPlay(index)"
|
||||
></video>
|
||||
<text class="video-title">{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoList: [
|
||||
{
|
||||
src: 'https://example.com/video1.mp4',
|
||||
poster: 'https://example.com/poster1.jpg',
|
||||
title: '视频1'
|
||||
},
|
||||
{
|
||||
src: 'https://example.com/video2.mp4',
|
||||
poster: 'https://example.com/poster2.jpg',
|
||||
title: '视频2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleVideoPlay(index) {
|
||||
console.log('播放视频', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.video-title {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 全屏播放
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<video
|
||||
:src="videoSrc"
|
||||
controls
|
||||
:show-fullscreen-btn="true"
|
||||
:enable-play-gesture="true"
|
||||
@fullscreenchange="handleFullscreenChange"
|
||||
class="video-player"
|
||||
></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: 'https://example.com/video.mp4',
|
||||
isFullscreen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFullscreenChange(e) {
|
||||
this.isFullscreen = e.detail.fullScreen
|
||||
console.log('全屏状态', this.isFullscreen)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 视频弹幕
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<video
|
||||
:src="videoSrc"
|
||||
:danmu-list="danmuList"
|
||||
:enable-danmu="true"
|
||||
:danmu-btn="true"
|
||||
controls
|
||||
class="video-player"
|
||||
></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: 'https://example.com/video.mp4',
|
||||
danmuList: [
|
||||
{
|
||||
text: '第一条弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
},
|
||||
{
|
||||
text: '第二条弹幕',
|
||||
color: '#00ff00',
|
||||
time: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| src | String | - | 要播放视频的资源地址 |
|
||||
| controls | Boolean | true | 是否显示默认播放控件 |
|
||||
| autoplay | Boolean | false | 是否自动播放 |
|
||||
| loop | Boolean | false | 是否循环播放 |
|
||||
| muted | Boolean | false | 是否静音播放 |
|
||||
| poster | String | - | 视频封面的图片网络资源地址 |
|
||||
| show-fullscreen-btn | Boolean | true | 是否显示全屏按钮 |
|
||||
| enable-play-gesture | Boolean | false | 是否开启播放手势 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 视频地址需要配置合法域名
|
||||
2. `autoplay` 在某些平台可能不生效
|
||||
3. 建议设置 `poster` 作为视频封面
|
||||
4. 可以通过事件监听播放状态
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/video.html
|
||||
- **选择视频**: https://doc.dcloud.net.cn/uni-app-x/api/media/video.html#choosevideo
|
||||
@@ -0,0 +1,407 @@
|
||||
# view 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/view.html
|
||||
|
||||
## 概述
|
||||
|
||||
`view` 是视图容器组件，类似于 HTML 中的 `div`，用于包裹各种元素内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
### 基本视图容器
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>这是内容</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: Flex 布局 - 横向布局
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.uni-flex {
|
||||
display: flex;
|
||||
}
|
||||
.uni-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-item {
|
||||
flex: 1;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
.uni-bg-red {
|
||||
background-color: #ff3b30;
|
||||
}
|
||||
.uni-bg-green {
|
||||
background-color: #4cd964;
|
||||
}
|
||||
.uni-bg-blue {
|
||||
background-color: #007aff;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: Flex 布局 - 纵向布局
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.uni-flex {
|
||||
display: flex;
|
||||
}
|
||||
.uni-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-item-V {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 3: 点击态效果
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
class="clickable-item"
|
||||
hover-class="hover"
|
||||
hover-start-time="50"
|
||||
hover-stay-time="400"
|
||||
@click="handleClick"
|
||||
>
|
||||
点击我
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
uni.showToast({
|
||||
title: '被点击了',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.clickable-item {
|
||||
padding: 20px;
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.hover {
|
||||
background-color: #0051d5;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 阻止点击态冒泡
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container" hover-class="container-hover">
|
||||
<view
|
||||
class="inner-item"
|
||||
hover-class="inner-hover"
|
||||
hover-stop-propagation="true"
|
||||
@click="handleInnerClick"
|
||||
>
|
||||
内部元素（阻止冒泡）
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleInnerClick() {
|
||||
console.log('内部元素被点击')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container-hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.inner-item {
|
||||
padding: 20px;
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.inner-hover {
|
||||
background-color: #0051d5;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 5: 嵌套视图
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">页面标题</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="section">
|
||||
<text class="section-title">第一部分</text>
|
||||
<view class="section-content">
|
||||
<text>这是第一部分的内容</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<text class="section-title">第二部分</text>
|
||||
<view class="section-content">
|
||||
<text>这是第二部分的内容</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<text>页脚</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
padding: 20px;
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section-content {
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.footer {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 6: 条件渲染
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="showContent" class="content">
|
||||
<text>这是显示的内容</text>
|
||||
</view>
|
||||
<view v-else class="empty">
|
||||
<text>暂无内容</text>
|
||||
</view>
|
||||
<button @click="toggleContent">切换显示</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showContent: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleContent() {
|
||||
this.showContent = !this.showContent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
background-color: #4cd964;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.empty {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 7: 列表渲染
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ id: 1, name: '项目 1' },
|
||||
{ id: 2, name: '项目 2' },
|
||||
{ id: 3, name: '项目 3' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleItemClick(item) {
|
||||
uni.showToast({
|
||||
title: `点击了 ${item.name}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.list-item {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| hover-class | String | none | 指定按下去的样式类 |
|
||||
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
|
||||
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
|
||||
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `view` 组件本身不显示任何可视化元素，主要用于包裹其他组件
|
||||
2. 可以使用 CSS 样式控制 `view` 的显示效果
|
||||
3. 支持 Flex 布局，常用于页面布局
|
||||
4. `hover-class` 属性用于设置点击态效果
|
||||
5. `hover-stop-propagation` 在某些平台可能不支持
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/view.html
|
||||
- **Flex 布局**: https://uniapp.dcloud.net.cn/tutorial/css-flex.html
|
||||
@@ -0,0 +1,196 @@
|
||||
# web-view 组件示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/web-view.html
|
||||
|
||||
## 概述
|
||||
|
||||
`web-view` 是网页视图组件，用于在页面中嵌入网页。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<web-view src="https://example.com"></web-view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本网页显示
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<web-view :src="webUrl"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: 'https://example.com'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 2: 动态加载网页
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input v-model="url" placeholder="输入网址" />
|
||||
<button @click="loadUrl">加载网页</button>
|
||||
<web-view v-if="webUrl" :src="webUrl"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
webUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadUrl() {
|
||||
if (this.url) {
|
||||
// 确保 URL 以 http:// 或 https:// 开头
|
||||
if (!this.url.startsWith('http://') && !this.url.startsWith('https://')) {
|
||||
this.webUrl = 'https://' + this.url
|
||||
} else {
|
||||
this.webUrl = this.url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 从参数加载网页
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<web-view :src="webUrl"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.url) {
|
||||
this.webUrl = decodeURIComponent(options.url)
|
||||
} else {
|
||||
this.webUrl = 'https://example.com'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 网页与小程序通信
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<web-view :src="webUrl" @message="handleMessage"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: 'https://example.com'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMessage(e) {
|
||||
console.log('收到网页消息', e.detail.data)
|
||||
// 处理来自网页的消息
|
||||
const data = e.detail.data[0]
|
||||
if (data && data.type === 'close') {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 加载本地 HTML
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<web-view :src="localHtmlUrl"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
localHtmlUrl: '/static/webview.html'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| src | String | - | webview 指向网页的链接 |
|
||||
|
||||
## 事件说明
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
|--------|------|--------|
|
||||
| @message | 网页向小程序 postMessage 时触发 | e.detail.data 包含网页传递的数据 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `src` 必须是 HTTPS 协议（H5 除外）
|
||||
2. 需要在 `manifest.json` 中配置业务域名
|
||||
3. 网页可以通过 `wx.miniProgram.postMessage` 向小程序发送消息
|
||||
4. 建议使用全屏显示 web-view
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/web-view.html
|
||||
- **配置业务域名**: https://uniapp.dcloud.net.cn/tutorial/app-webview.html
|
||||
Reference in New Issue
Block a user