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,189 @@
|
||||
# uni.hideLoading - 隐藏加载提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideLoading` 用于隐藏加载提示框。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideLoading()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示加载
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
|
||||
// 隐藏加载
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求中使用
|
||||
|
||||
```javascript
|
||||
// 显示加载
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
// 请求完成后隐藏加载
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('加载失败', err)
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都要隐藏加载
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装加载函数
|
||||
|
||||
```javascript
|
||||
// utils/loading.js
|
||||
const loading = {
|
||||
show(title = '加载中...') {
|
||||
uni.showLoading({
|
||||
title: title,
|
||||
mask: true
|
||||
})
|
||||
},
|
||||
|
||||
hide() {
|
||||
uni.hideLoading()
|
||||
},
|
||||
|
||||
async withLoading(fn, title = '加载中...') {
|
||||
this.show(title)
|
||||
try {
|
||||
const result = await fn()
|
||||
return result
|
||||
} finally {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
loading.withLoading(async () => {
|
||||
const data = await fetchData()
|
||||
return data
|
||||
}, '加载数据中...')
|
||||
```
|
||||
|
||||
### 示例 5: 确保隐藏加载
|
||||
|
||||
```javascript
|
||||
function loadData() {
|
||||
let loadingShown = false
|
||||
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
loadingShown = true
|
||||
|
||||
// 执行加载逻辑
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
if (loadingShown) {
|
||||
uni.hideLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
// 确保异常时也隐藏加载
|
||||
if (loadingShown) {
|
||||
uni.hideLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须与 `uni.showLoading` 配对使用
|
||||
2. 建议在 `complete` 回调中调用，确保无论成功失败都会隐藏
|
||||
3. 多次调用 `showLoading` 后，只需调用一次 `hideLoading` 即可隐藏
|
||||
4. 建议使用 try-finally 确保异常时也能隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading
|
||||
- **显示加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading
|
||||
@@ -0,0 +1,140 @@
|
||||
# uni.hideNavigationBarLoading - 隐藏导航栏加载动画示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#hidenavigationbarloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideNavigationBarLoading` 用于隐藏当前页面导航栏的加载动画。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideNavigationBarLoading()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 隐藏加载动画
|
||||
uni.hideNavigationBarLoading()
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求中使用
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
// 请求完成后隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('加载失败', err)
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都要隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 确保隐藏
|
||||
|
||||
```javascript
|
||||
function loadData() {
|
||||
let loadingShown = false
|
||||
|
||||
try {
|
||||
uni.showNavigationBarLoading()
|
||||
loadingShown = true
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
if (loadingShown) {
|
||||
uni.hideNavigationBarLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
// 确保异常时也隐藏
|
||||
if (loadingShown) {
|
||||
uni.hideNavigationBarLoading()
|
||||
loadingShown = false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须与 `uni.showNavigationBarLoading` 配对使用
|
||||
2. 建议在 `complete` 回调中调用，确保无论成功失败都会隐藏
|
||||
3. 多次调用 `showNavigationBarLoading` 后，只需调用一次 `hideNavigationBarLoading` 即可隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#hidenavigationbarloading
|
||||
- **显示加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#shownavigationbarloading
|
||||
@@ -0,0 +1,147 @@
|
||||
# uni.hideTabBarRedDot - 隐藏 TabBar 红点示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideTabBarRedDot` 用于隐藏 tabBar 某一项的右上角的红点。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 隐藏红点
|
||||
|
||||
```javascript
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0, // tabBar 的哪一项，从左边算起
|
||||
success: () => {
|
||||
console.log('隐藏成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('隐藏失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 阅读消息后隐藏
|
||||
|
||||
```javascript
|
||||
function readMessage(messageId) {
|
||||
// 标记消息为已读
|
||||
uni.request({
|
||||
url: `https://api.example.com/messages/${messageId}/read`,
|
||||
method: 'POST',
|
||||
success: () => {
|
||||
// 隐藏消息红点
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1 // 消息页面的索引
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="hideRedDot">隐藏红点</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hideRedDot() {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已隐藏',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 进入页面时隐藏
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>消息列表</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
// 进入消息页面时隐藏红点
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1 // 当前页面的索引
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 清除所有红点
|
||||
|
||||
```javascript
|
||||
function clearAllRedDots(tabBarCount) {
|
||||
for (let i = 0; i < tabBarCount; i++) {
|
||||
uni.hideTabBarRedDot({
|
||||
index: i
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用（假设有4个tabBar）
|
||||
clearAllRedDots(4)
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. 如果该 tabBar 项没有红点，调用此 API 不会报错
|
||||
3. 建议在用户查看相关内容后隐藏红点
|
||||
4. 与 `showTabBarRedDot` 配合使用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
|
||||
- **显示红点**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot
|
||||
@@ -0,0 +1,153 @@
|
||||
# uni.hideToast - 隐藏消息提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hidetoast
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.hideToast` 用于隐藏消息提示框。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.hideToast()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示提示
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 提前隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
}, 1000)
|
||||
```
|
||||
|
||||
### 示例 2: 手动控制提示显示时间
|
||||
|
||||
```javascript
|
||||
function showCustomToast(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'none',
|
||||
duration: duration
|
||||
})
|
||||
|
||||
// 如果需要提前隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
}, duration - 500)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showMessage">显示消息</button>
|
||||
<button @click="hideMessage">隐藏消息</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showMessage() {
|
||||
uni.showToast({
|
||||
title: '这是一条消息',
|
||||
icon: 'none',
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
hideMessage() {
|
||||
uni.hideToast()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 替换提示内容
|
||||
|
||||
```javascript
|
||||
function showReplacingToast(messages) {
|
||||
let currentIndex = 0
|
||||
|
||||
const showNext = () => {
|
||||
if (currentIndex < messages.length) {
|
||||
uni.showToast({
|
||||
title: messages[currentIndex],
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
currentIndex++
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
setTimeout(showNext, 100)
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
showNext()
|
||||
}
|
||||
|
||||
// 使用
|
||||
showReplacingToast(['消息1', '消息2', '消息3'])
|
||||
```
|
||||
|
||||
### 示例 5: 确保隐藏提示
|
||||
|
||||
```javascript
|
||||
function showTemporaryToast(title) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
|
||||
// 3秒后自动隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideToast()
|
||||
}, 3000)
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 用于提前隐藏通过 `uni.showToast` 显示的提示
|
||||
2. 如果不调用，提示会在 `duration` 时间后自动消失
|
||||
3. 建议在需要立即隐藏提示时使用
|
||||
4. 通常不需要手动调用，除非需要提前隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hidetoast
|
||||
- **显示提示**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
|
||||
@@ -0,0 +1,171 @@
|
||||
# uni.removeTabBarBadge - 移除 TabBar 徽标示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#removetabbarbadge
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.removeTabBarBadge` 用于移除 tabBar 某一项右上角的文本。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.removeTabBarBadge({
|
||||
index: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 清除徽标
|
||||
|
||||
```javascript
|
||||
uni.removeTabBarBadge({
|
||||
index: 0, // tabBar 的哪一项，从左边算起
|
||||
success: () => {
|
||||
console.log('清除成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('清除失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 清除未读消息徽标
|
||||
|
||||
```javascript
|
||||
function clearUnreadBadge() {
|
||||
uni.removeTabBarBadge({
|
||||
index: 1, // 消息页面的索引
|
||||
success: () => {
|
||||
console.log('未读消息徽标已清除')
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="clearBadge">清除徽标</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearBadge() {
|
||||
uni.removeTabBarBadge({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 阅读消息后清除
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="message-item"
|
||||
@click="readMessage(message)"
|
||||
>
|
||||
<text>{{ message.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messages: [
|
||||
{ id: 1, content: '消息1', read: false },
|
||||
{ id: 2, content: '消息2', read: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
readMessage(message) {
|
||||
message.read = true
|
||||
|
||||
// 如果所有消息都已读，清除徽标
|
||||
const allRead = this.messages.every(msg => msg.read)
|
||||
if (allRead) {
|
||||
uni.removeTabBarBadge({
|
||||
index: 1 // 消息页面的索引
|
||||
})
|
||||
} else {
|
||||
// 更新未读数
|
||||
const unreadCount = this.messages.filter(msg => !msg.read).length
|
||||
uni.setTabBarBadge({
|
||||
index: 1,
|
||||
text: String(unreadCount)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 清除所有徽标
|
||||
|
||||
```javascript
|
||||
function clearAllBadges(tabBarCount) {
|
||||
for (let i = 0; i < tabBarCount; i++) {
|
||||
uni.removeTabBarBadge({
|
||||
index: i
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用（假设有4个tabBar）
|
||||
clearAllBadges(4)
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. 如果该 tabBar 项没有徽标，调用此 API 不会报错
|
||||
3. 建议在消息已读或数量为 0 时清除徽标
|
||||
4. 与 `setTabBarBadge` 配合使用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#removetabbarbadge
|
||||
- **设置徽标**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge
|
||||
@@ -0,0 +1,180 @@
|
||||
# uni.setNavigationBarColor - 设置导航栏颜色示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbarcolor
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setNavigationBarColor` 用于设置页面导航栏颜色。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#007aff'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置导航栏颜色
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff', // 前景颜色，包括按钮、标题、状态栏的颜色
|
||||
backgroundColor: '#007aff', // 背景颜色
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 深色主题
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 浅色主题
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="setDarkTheme">深色主题</button>
|
||||
<button @click="setLightTheme">浅色主题</button>
|
||||
<button @click="setCustomColor">自定义颜色</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setDarkTheme() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
})
|
||||
},
|
||||
setLightTheme() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
},
|
||||
setCustomColor() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#ff3b30',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 根据内容动态设置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="article">
|
||||
<text>{{ article.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
article: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadArticle(options.id)
|
||||
},
|
||||
methods: {
|
||||
loadArticle(id) {
|
||||
uni.request({
|
||||
url: `https://api.example.com/article/${id}`,
|
||||
success: (res) => {
|
||||
this.article = res.data
|
||||
// 根据文章主题色设置导航栏
|
||||
if (res.data.theme === 'dark') {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| frontColor | String | 是 | 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 |
|
||||
| backgroundColor | String | 是 | 背景颜色值，有效值为十六进制颜色 |
|
||||
| animation | Object | 否 | 动画效果 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `frontColor` 仅支持 `#ffffff` 和 `#000000`
|
||||
2. `backgroundColor` 支持任意十六进制颜色
|
||||
3. 可以通过 `animation` 设置颜色切换动画
|
||||
4. 建议与页面主题色保持一致
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbarcolor
|
||||
- **设置标题**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
@@ -0,0 +1,191 @@
|
||||
# uni.setNavigationBarTitle - 设置导航栏标题示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setNavigationBarTitle` 用于设置当前页面导航栏标题。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新标题'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置标题
|
||||
|
||||
```javascript
|
||||
uni.setNavigationBarTitle({
|
||||
title: '我的页面',
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('设置失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 动态设置标题
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input v-model="pageTitle" placeholder="输入页面标题" />
|
||||
<button @click="updateTitle">更新标题</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageTitle: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateTitle() {
|
||||
if (this.pageTitle) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.pageTitle
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3: 在页面生命周期中设置
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>页面内容</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad(options) {
|
||||
// 根据参数设置标题
|
||||
if (options.type === 'detail') {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '详情页'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '列表页'
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 也可以在这里设置
|
||||
uni.setNavigationBarTitle({
|
||||
title: '页面标题'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 根据数据设置标题
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="article">
|
||||
<text>{{ article.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
article: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadArticle(options.id)
|
||||
},
|
||||
methods: {
|
||||
loadArticle(id) {
|
||||
uni.request({
|
||||
url: `https://api.example.com/article/${id}`,
|
||||
success: (res) => {
|
||||
this.article = res.data
|
||||
// 使用文章标题作为页面标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.title
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装设置标题函数
|
||||
|
||||
```javascript
|
||||
// utils/navigation.js
|
||||
const navigation = {
|
||||
setTitle(title) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: title
|
||||
})
|
||||
},
|
||||
|
||||
setTitleWithSubtitle(mainTitle, subtitle) {
|
||||
const fullTitle = subtitle ? `${mainTitle} - ${subtitle}` : mainTitle
|
||||
uni.setNavigationBarTitle({
|
||||
title: fullTitle
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
navigation.setTitle('我的页面')
|
||||
navigation.setTitleWithSubtitle('商品', '详情')
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 是 | 页面标题 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 标题长度建议不超过 10 个字符
|
||||
2. 可以在 `onLoad` 或 `onReady` 中设置
|
||||
3. 设置后立即生效
|
||||
4. 建议根据页面内容动态设置标题
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbartitle
|
||||
- **设置导航栏颜色**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#setnavigationbarcolor
|
||||
@@ -0,0 +1,205 @@
|
||||
# uni.setTabBarBadge - 设置 TabBar 徽标示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setTabBarBadge` 用于为 tabBar 某一项的右上角添加文本。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setTabBarBadge({
|
||||
index: 0,
|
||||
text: '1'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置徽标
|
||||
|
||||
```javascript
|
||||
uni.setTabBarBadge({
|
||||
index: 0, // tabBar 的哪一项，从左边算起
|
||||
text: '5' // 显示的文本，超过 3 个字符则显示成 "..."
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 显示未读消息数
|
||||
|
||||
```javascript
|
||||
function updateUnreadCount(count) {
|
||||
if (count > 0) {
|
||||
const text = count > 99 ? '99+' : String(count)
|
||||
uni.setTabBarBadge({
|
||||
index: 1, // 消息页面的索引
|
||||
text: text
|
||||
})
|
||||
} else {
|
||||
// 清除徽标
|
||||
uni.removeTabBarBadge({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
updateUnreadCount(5) // 显示 "5"
|
||||
updateUnreadCount(100) // 显示 "99+"
|
||||
updateUnreadCount(0) // 清除徽标
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="setBadge">设置徽标</button>
|
||||
<button @click="removeBadge">清除徽标</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setBadge() {
|
||||
uni.setTabBarBadge({
|
||||
index: 0,
|
||||
text: '5'
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已设置徽标',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
removeBadge() {
|
||||
uni.removeTabBarBadge({
|
||||
index: 0
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已清除徽标',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 实时更新未读消息
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text>未读消息：{{ unreadCount }}</text>
|
||||
<button @click="refreshUnreadCount">刷新未读数</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
unreadCount: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadUnreadCount()
|
||||
// 定时刷新
|
||||
setInterval(() => {
|
||||
this.loadUnreadCount()
|
||||
}, 30000) // 每30秒刷新一次
|
||||
},
|
||||
methods: {
|
||||
loadUnreadCount() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/unread-count',
|
||||
success: (res) => {
|
||||
this.unreadCount = res.data.count
|
||||
this.updateTabBarBadge(res.data.count)
|
||||
}
|
||||
})
|
||||
},
|
||||
updateTabBarBadge(count) {
|
||||
if (count > 0) {
|
||||
const text = count > 99 ? '99+' : String(count)
|
||||
uni.setTabBarBadge({
|
||||
index: 1, // 消息页面的索引
|
||||
text: text
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
},
|
||||
refreshUnreadCount() {
|
||||
this.loadUnreadCount()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 多个 TabBar 徽标
|
||||
|
||||
```javascript
|
||||
function updateAllTabBarBadges(badges) {
|
||||
// badges: [{ index: 0, text: '5' }, { index: 1, text: '10' }]
|
||||
badges.forEach(badge => {
|
||||
if (badge.text && badge.text !== '0') {
|
||||
uni.setTabBarBadge({
|
||||
index: badge.index,
|
||||
text: badge.text
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: badge.index
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
updateAllTabBarBadges([
|
||||
{ index: 0, text: '5' },
|
||||
{ index: 1, text: '10' },
|
||||
{ index: 2, text: '0' } // 清除
|
||||
])
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
|
||||
| text | String | 是 | 显示的文本，超过 3 个字符则显示成 "..." |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. `text` 超过 3 个字符会显示成 "..."
|
||||
3. 建议数字超过 99 时显示 "99+"
|
||||
4. 使用 `removeTabBarBadge` 可以清除徽标
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge
|
||||
- **清除徽标**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#removetabbarbadge
|
||||
@@ -0,0 +1,168 @@
|
||||
# uni.setTabBarStyle - 设置 TabBar 样式示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarstyle
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setTabBarStyle` 用于动态设置 tabBar 的整体样式。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#3cc51f',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 设置 TabBar 样式
|
||||
|
||||
```javascript
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83', // 未选中时的文字颜色
|
||||
selectedColor: '#3cc51f', // 选中时的文字颜色
|
||||
backgroundColor: '#ffffff', // 背景颜色
|
||||
borderStyle: 'black', // 边框颜色
|
||||
success: () => {
|
||||
console.log('设置成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 深色主题
|
||||
|
||||
```javascript
|
||||
function setDarkTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#999999',
|
||||
selectedColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 浅色主题
|
||||
|
||||
```javascript
|
||||
function setLightTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="setDarkTheme">深色主题</button>
|
||||
<button @click="setLightTheme">浅色主题</button>
|
||||
<button @click="setCustomTheme">自定义主题</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setDarkTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#999999',
|
||||
selectedColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
},
|
||||
setLightTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
},
|
||||
setCustomTheme() {
|
||||
uni.setTabBarStyle({
|
||||
color: '#666666',
|
||||
selectedColor: '#ff3b30',
|
||||
backgroundColor: '#f5f5f5',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 根据系统主题设置
|
||||
|
||||
```javascript
|
||||
function setTabBarThemeBySystem() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
// 根据系统主题设置（需要自己判断）
|
||||
const isDark = res.theme === 'dark' // 某些平台支持
|
||||
|
||||
if (isDark) {
|
||||
uni.setTabBarStyle({
|
||||
color: '#999999',
|
||||
selectedColor: '#ffffff',
|
||||
backgroundColor: '#000000',
|
||||
borderStyle: 'white'
|
||||
})
|
||||
} else {
|
||||
uni.setTabBarStyle({
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007aff',
|
||||
backgroundColor: '#ffffff',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| color | String | 否 | tab 上的文字默认颜色 |
|
||||
| selectedColor | String | 否 | tab 上的文字选中时的颜色 |
|
||||
| backgroundColor | String | 否 | tab 的背景色 |
|
||||
| borderStyle | String | 否 | tabbar 上边框的颜色，可选值：black、white |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 设置后立即生效
|
||||
2. `color` 和 `selectedColor` 建议使用对比度高的颜色
|
||||
3. `borderStyle` 可选值为 `black` 或 `white`
|
||||
4. 建议与页面主题色保持一致
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarstyle
|
||||
- **设置 TabBar 项**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbaritem
|
||||
@@ -0,0 +1,217 @@
|
||||
# uni.showActionSheet - 操作菜单示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showactionsheet
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showActionSheet` 用于显示操作菜单，从底部弹出选择项。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['选项1', '选项2', '选项3'],
|
||||
success: (res) => {
|
||||
console.log('选择了第', res.tapIndex, '个选项')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本操作菜单
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择', '取消'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 拍照
|
||||
console.log('选择拍照')
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 从相册选择
|
||||
console.log('从相册选择')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 图片选择
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 拍照
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['camera'],
|
||||
success: (imageRes) => {
|
||||
console.log('拍照成功', imageRes.tempFilePaths)
|
||||
}
|
||||
})
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 从相册选择
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album'],
|
||||
success: (imageRes) => {
|
||||
console.log('选择成功', imageRes.tempFilePaths)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 分享功能
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
// 分享到微信
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession'
|
||||
})
|
||||
break
|
||||
case 1:
|
||||
// 分享到朋友圈
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneTimeline'
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
// 复制链接
|
||||
uni.setClipboardData({
|
||||
data: 'https://example.com',
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '链接已复制',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showMoreOptions">更多操作</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showMoreOptions() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['编辑', '删除', '分享', '举报'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
this.handleEdit()
|
||||
break
|
||||
case 1:
|
||||
this.handleDelete()
|
||||
break
|
||||
case 2:
|
||||
this.handleShare()
|
||||
break
|
||||
case 3:
|
||||
this.handleReport()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleEdit() {
|
||||
console.log('编辑')
|
||||
},
|
||||
handleDelete() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('删除')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShare() {
|
||||
console.log('分享')
|
||||
},
|
||||
handleReport() {
|
||||
console.log('举报')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 带取消按钮
|
||||
|
||||
```javascript
|
||||
uni.showActionSheet({
|
||||
itemList: ['选项1', '选项2', '选项3'],
|
||||
success: (res) => {
|
||||
console.log('选择了', res.tapIndex)
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('取消选择')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| itemList | Array | 是 | 按钮的文字数组 |
|
||||
| itemColor | String | 否 | 按钮的文字颜色 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| tapIndex | Number | 用户点击的按钮序号，从上到下的顺序，从0开始 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `itemList` 数组最多支持 6 个选项
|
||||
2. 用户点击取消或遮罩层会触发 fail 回调
|
||||
3. `tapIndex` 从 0 开始，对应 `itemList` 的索引
|
||||
4. 建议将"取消"选项放在最后
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showactionsheet
|
||||
- **模态弹窗**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal
|
||||
@@ -0,0 +1,189 @@
|
||||
# uni.showLoading - 加载提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showLoading` 用于显示加载提示框，常用于异步操作时显示加载状态。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本加载提示
|
||||
|
||||
```javascript
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 操作完成后隐藏
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求时显示加载
|
||||
|
||||
```javascript
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
<view v-if="data">{{ data }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 模拟请求
|
||||
setTimeout(() => {
|
||||
this.data = '数据加载完成'
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '加载成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装加载函数
|
||||
|
||||
```javascript
|
||||
// utils/loading.js
|
||||
const loading = {
|
||||
show(title = '加载中...') {
|
||||
uni.showLoading({
|
||||
title: title,
|
||||
mask: true
|
||||
})
|
||||
},
|
||||
|
||||
hide() {
|
||||
uni.hideLoading()
|
||||
},
|
||||
|
||||
async withLoading(fn, title = '加载中...') {
|
||||
this.show(title)
|
||||
try {
|
||||
const result = await fn()
|
||||
return result
|
||||
} finally {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
loading.withLoading(async () => {
|
||||
const data = await fetchData()
|
||||
return data
|
||||
}, '加载数据中...')
|
||||
```
|
||||
|
||||
### 示例 5: 配合请求使用
|
||||
|
||||
```javascript
|
||||
// 显示加载
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 提交数据
|
||||
uni.request({
|
||||
url: 'https://api.example.com/submit',
|
||||
method: 'POST',
|
||||
data: { name: 'test' },
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 是 | 提示的内容 |
|
||||
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须调用 `uni.hideLoading()` 才能关闭加载提示
|
||||
2. `mask: true` 可以防止用户在加载时操作页面
|
||||
3. 建议在异步操作的开始显示，在完成时隐藏
|
||||
4. 不要在 `success` 回调中忘记调用 `hideLoading`
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showloading
|
||||
- **隐藏加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hideloading
|
||||
@@ -0,0 +1,226 @@
|
||||
# uni.showModal - 模态弹窗示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showModal` 用于显示模态弹窗，常用于确认操作。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 确认删除
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除这条记录吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 执行删除操作
|
||||
console.log('确认删除')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 自定义按钮文字
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
confirmText: '退出',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#ff3b30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 退出登录
|
||||
uni.removeStorageSync('token')
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 只显示确定按钮
|
||||
|
||||
```javascript
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '操作成功',
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="handleDelete">删除记录</button>
|
||||
<button @click="handleLogout">退出登录</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleDelete() {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '删除后无法恢复，确定要删除吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#ff3b30',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 执行删除
|
||||
this.deleteRecord()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('token')
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteRecord() {
|
||||
// 删除逻辑
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 封装确认函数
|
||||
|
||||
```javascript
|
||||
// utils/modal.js
|
||||
const modal = {
|
||||
confirm(title, content) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showModal({
|
||||
title: title,
|
||||
content: content,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
resolve(true)
|
||||
} else {
|
||||
resolve(false)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
alert(title, content) {
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: title,
|
||||
content: content,
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const result = await modal.confirm('提示', '确定要删除吗？')
|
||||
if (result) {
|
||||
console.log('用户确认')
|
||||
} else {
|
||||
console.log('用户取消')
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 否 | 提示的标题 |
|
||||
| content | String | 否 | 提示的内容 |
|
||||
| showCancel | Boolean | 否 | 是否显示取消按钮，默认 true |
|
||||
| cancelText | String | 否 | 取消按钮的文字，默认"取消" |
|
||||
| cancelColor | String | 否 | 取消按钮的文字颜色 |
|
||||
| confirmText | String | 否 | 确认按钮的文字，默认"确定" |
|
||||
| confirmColor | String | 否 | 确认按钮的文字颜色 |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| confirm | Boolean | 为 true 时，表示用户点击了确定按钮 |
|
||||
| cancel | Boolean | 为 true 时，表示用户点击了取消按钮 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `title` 和 `content` 至少需要提供一个
|
||||
2. 确认和取消按钮的文字可以自定义
|
||||
3. 可以通过 `showCancel: false` 只显示确定按钮
|
||||
4. 建议用于重要的确认操作
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showmodal
|
||||
- **消息提示**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
|
||||
@@ -0,0 +1,194 @@
|
||||
# uni.showNavigationBarLoading - 显示导航栏加载动画示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#shownavigationbarloading
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showNavigationBarLoading` 用于在当前页面导航栏显示加载动画。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showNavigationBarLoading()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 基本使用
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 隐藏加载动画
|
||||
setTimeout(() => {
|
||||
uni.hideNavigationBarLoading()
|
||||
}, 2000)
|
||||
```
|
||||
|
||||
### 示例 2: 网络请求时显示
|
||||
|
||||
```javascript
|
||||
// 显示加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
// 请求完成后隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadData">加载数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadData() {
|
||||
// 显示导航栏加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('加载失败', err)
|
||||
},
|
||||
complete: () => {
|
||||
// 无论成功失败都要隐藏
|
||||
uni.hideNavigationBarLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装加载函数
|
||||
|
||||
```javascript
|
||||
// utils/loading.js
|
||||
const loading = {
|
||||
showNavBar() {
|
||||
uni.showNavigationBarLoading()
|
||||
},
|
||||
|
||||
hideNavBar() {
|
||||
uni.hideNavigationBarLoading()
|
||||
},
|
||||
|
||||
async withNavBarLoading(fn) {
|
||||
this.showNavBar()
|
||||
try {
|
||||
const result = await fn()
|
||||
return result
|
||||
} finally {
|
||||
this.hideNavBar()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
loading.withNavBarLoading(async () => {
|
||||
const data = await fetchData()
|
||||
return data
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 页面刷新时显示
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="refresh">刷新</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
refresh() {
|
||||
// 显示导航栏加载动画
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 模拟刷新
|
||||
setTimeout(() => {
|
||||
uni.hideNavigationBarLoading()
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// 下拉刷新时显示
|
||||
uni.showNavigationBarLoading()
|
||||
|
||||
// 刷新数据
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
console.log('数据', res.data)
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideNavigationBarLoading()
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 必须与 `uni.hideNavigationBarLoading` 配对使用
|
||||
2. 在导航栏标题旁边显示加载动画
|
||||
3. 适合页面级别的加载状态
|
||||
4. 建议在 `complete` 回调中隐藏
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#shownavigationbarloading
|
||||
- **隐藏加载**: https://doc.dcloud.net.cn/uni-app-x/api/ui/navigation-bar.html#hidenavigationbarloading
|
||||
@@ -0,0 +1,199 @@
|
||||
# uni.showTabBarRedDot - 显示 TabBar 红点示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showTabBarRedDot` 用于显示 tabBar 某一项的右上角的红点。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showTabBarRedDot({
|
||||
index: 0
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 显示红点
|
||||
|
||||
```javascript
|
||||
uni.showTabBarRedDot({
|
||||
index: 0, // tabBar 的哪一项，从左边算起
|
||||
success: () => {
|
||||
console.log('显示成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('显示失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 显示消息红点
|
||||
|
||||
```javascript
|
||||
function showMessageRedDot() {
|
||||
uni.showTabBarRedDot({
|
||||
index: 1, // 消息页面的索引
|
||||
success: () => {
|
||||
console.log('消息红点已显示')
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showRedDot">显示红点</button>
|
||||
<button @click="hideRedDot">隐藏红点</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showRedDot() {
|
||||
uni.showTabBarRedDot({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已显示红点',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
hideRedDot() {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 0,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已隐藏红点',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 根据状态显示红点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="hasNewMessage" class="message-list">
|
||||
<view
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="message-item"
|
||||
@click="readMessage(message)"
|
||||
>
|
||||
<text>{{ message.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
hasNewMessage: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadMessages()
|
||||
},
|
||||
methods: {
|
||||
loadMessages() {
|
||||
uni.request({
|
||||
url: 'https://api.example.com/messages',
|
||||
success: (res) => {
|
||||
this.messages = res.data
|
||||
this.hasNewMessage = res.data.some(msg => !msg.read)
|
||||
|
||||
// 根据是否有新消息显示红点
|
||||
if (this.hasNewMessage) {
|
||||
uni.showTabBarRedDot({
|
||||
index: 1 // 消息页面的索引
|
||||
})
|
||||
} else {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
readMessage(message) {
|
||||
message.read = true
|
||||
this.hasNewMessage = this.messages.some(msg => !msg.read)
|
||||
|
||||
if (!this.hasNewMessage) {
|
||||
uni.hideTabBarRedDot({
|
||||
index: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 多个 TabBar 红点
|
||||
|
||||
```javascript
|
||||
function showAllRedDots(indices) {
|
||||
indices.forEach(index => {
|
||||
uni.showTabBarRedDot({
|
||||
index: index
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 使用
|
||||
showAllRedDots([0, 1, 2]) // 显示第0、1、2项的红点
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `index` 从 0 开始，对应 `pages.json` 中 tabBar 的配置顺序
|
||||
2. 红点不显示数字，只显示一个小红点
|
||||
3. 与 `setTabBarBadge` 的区别：红点不显示文字，徽标显示文字
|
||||
4. 使用 `hideTabBarRedDot` 可以隐藏红点
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot
|
||||
- **隐藏红点**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
|
||||
- **设置徽标**: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#settabbarbadge
|
||||
@@ -0,0 +1,188 @@
|
||||
# uni.showToast - 消息提示示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.showToast` 用于显示消息提示框，常用于操作反馈。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 成功提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 错误提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '操作失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 加载提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '加载中...',
|
||||
icon: 'loading',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 无图标提示
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '这是一条消息',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 自定义图片
|
||||
|
||||
```javascript
|
||||
uni.showToast({
|
||||
title: '自定义图标',
|
||||
image: '/static/custom-icon.png',
|
||||
duration: 2000
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 6: 封装提示函数
|
||||
|
||||
```javascript
|
||||
// utils/toast.js
|
||||
const toast = {
|
||||
success(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'success',
|
||||
duration: duration
|
||||
})
|
||||
},
|
||||
|
||||
error(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'error',
|
||||
duration: duration
|
||||
})
|
||||
},
|
||||
|
||||
loading(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'loading',
|
||||
duration: duration
|
||||
})
|
||||
},
|
||||
|
||||
info(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: 'none',
|
||||
duration: duration
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
toast.success('保存成功')
|
||||
toast.error('保存失败')
|
||||
toast.info('这是一条消息')
|
||||
```
|
||||
|
||||
### 示例 7: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="handleSuccess">成功提示</button>
|
||||
<button @click="handleError">错误提示</button>
|
||||
<button @click="handleLoading">加载提示</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSuccess() {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
handleError() {
|
||||
uni.showToast({
|
||||
title: '操作失败',
|
||||
icon: 'error'
|
||||
})
|
||||
},
|
||||
handleLoading() {
|
||||
uni.showToast({
|
||||
title: '加载中...',
|
||||
icon: 'loading',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| title | String | 是 | 提示的内容 |
|
||||
| icon | String | 否 | 图标类型，可选值：success、error、loading、none |
|
||||
| image | String | 否 | 自定义图标的本地路径 |
|
||||
| duration | Number | 否 | 提示的延迟时间，单位 ms，默认 2000 |
|
||||
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. `title` 长度限制：微信小程序最多 7 个汉字长度
|
||||
2. 同时只能显示一个 toast，新的 toast 会覆盖旧的
|
||||
3. 使用 `uni.hideToast()` 可以手动关闭 toast
|
||||
4. `mask` 参数在某些平台可能不支持
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#showtoast
|
||||
- **隐藏提示**: https://doc.dcloud.net.cn/uni-app-x/api/ui/prompt.html#hidetoast
|
||||
Reference in New Issue
Block a user