JZTXT

uniapp专题学习（五）

发布时间 2023-06-02 18:18:39作者: 搬砖的杰先生

前言

在uniapp专题学习（四）中学习了以下知识点：

native修饰符、父子组件间的传值、sync修饰符与update响应式写法、vue的生命周期、uniapp的界面的交互反馈(uniapp的api比较多，所以只练习了一部分，更多的用法可以参考uniapp api)。

动态设置TabBar

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

详情请点击uni.setTabBarItem参数说明

示例代码：

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 某一项右上角的文本。

详情请点击removeTabBarBadge参数说明

示例代码：

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属性