前言
在uniapp专题学习(四)中学习了以下知识点:
native修饰符、父子组件间的传值、sync修饰符与update响应式写法、vue的生命周期、uniapp
的界面的交互反馈(uniapp
的api
比较多,所以只练习了一部分,更多的用法可以参考uniapp api)。
动态设置TabBar
uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容
示例代码:
uni.setTabBarItem({
index: 0,
text: 'text',
iconPath: '/path/to/iconPath',
selectedIconPath: '/path/to/selectedIconPath'
})
uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式
详情请点击setTabBarStyle参数说明
示例代码:
uni.setTabBarStyle({
color: '#FF0000',
selectedColor: '#00FF00',
backgroundColor: '#0000FF',
borderStyle: 'white'
})
uni.hideTabBar(OBJECT)
隐藏 tabBar
详情请点击hideTabBar参数说明
示例代码:
uni.hideTabBar()
uni.showTabBar(OBJECT)
显示 tabBar
详情请点击showTabBar参数说明
示例代码:
uni.showTabBar()
uni.setTabBarBadge(OBJECT)
为 tabBar 某一项的右上角添加文本。
详情请点击setTabBarBadge参数说明
示例代码:
uni.setTabBarBadge({
index: 0,
text: '99+'
})
uni.removeTabBarBadge(OBJECT)
移除 tabBar 某一项右上角的文本。
示例代码:
uni.removeTabBarBadge({
index: 0
})
uni.showTabBarRedDot(OBJECT)
显示 tabBar 某一项的右上角的红点。
详情请点击showTabBarRedDot参数说明
示例代码:
uni.showTabBarRedDot({
index: 0
})
uni.hideTabBarRedDot(OBJECT)
隐藏 tabBar 某一项的右上角的红点。
详情请点击hideTabBarRedDot参数说明
示例代码:
uni.hideTabBarRedDot({
index: 0
})
uni.request(OBJECT)
发起网络请求。
在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
详情请点击request参数说明
示例代码:
<template>
<view>
<image :src="imgUrl" @click="getDog"></image>
</view>
</template>
<script>
export default {
data() {
return {
imgUrl:""
};
},
methods:{
getDog(){
uni.showLoading({
title:"图片加载中"
})
uni.request({
url:"https://dog.ceo/api/breeds/image/random",
success: res => {
this.imgUrl = res.data.message
uni.hideLoading()
}
})
}
},
onLoad() {
this.getDog()
}
}
</script>
Tips:
- 携带参数可以添加
data
属性 - 修改请求头可以添加
header
属性 - 修改请求方式可以添加
method
属性