首页 > 其他分享 >uniapp专题学习(五)

uniapp专题学习(五)

时间:2023-06-02 18:23:05浏览次数:46  
标签:uniapp 专题学习 示例 OBJECT 详情请 点击 tabBar uni

前言

uniapp专题学习(四)中学习了以下知识点:

native修饰符、父子组件间的传值、sync修饰符与update响应式写法、vue的生命周期、uniapp的界面的交互反馈(uniappapi比较多,所以只练习了一部分,更多的用法可以参考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属性

标签:uniapp,专题学习,示例,OBJECT,详情请,点击,tabBar,uni
From: https://www.cnblogs.com/codexj/p/17452652.html

相关文章

  • 项目场景:uniapp多个输入框弹出软键盘后无法滚动到底部
    项目场景:uniapp多个输入框弹出软键盘后无法滚动到底部|遮挡底部input在做uniapp的时候遇到多个输入框的情况,用官方demo做个演示adjustPan模式问题描述uniapp多个输入框无法拉到最下面原因分析:1.adjustPan模式下软键盘弹出时,webview窗体高度不变,但窗体上推,以保证输入框不被软......
  • uniapp h5+ 拍照、录音功能实现
    uniapph5+拍照、录音功能实现uniapp功能实现提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录uniapph5+拍照、录音功能实现前言一、拍照1.调取摄像头拍摄照片2.管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能GalleryOptio......
  • uniapp 组件中使用页面的生命周期(vue2)
    用于直接在组件中使用onLoad,onBackPress等因为之前在写App的时候有许多弹窗,希望可以在有弹窗的时候先关闭弹窗,没有弹窗在执行返回事件,因此需要在页面onBackPress里面写很多判断,因此找了一些方法,写了可以直接在组件中调用页面生命周期的方法!使用mixinthis.$children去循环查询......
  • uniapp专题学习(四)
    前言在uniapp专题学习(三)中学习到的知识点有计算属性computed、计算属性computed和方法methods的区别、vue语法的自定义组件、pops的父子组件参数传递。native修饰符如果想在自定义组件执行原生的事件就需要用native来修饰假设我已经定义好了自定义组件,我想触发click事件,就需......
  • uniapp+vue3+ts 使用pinia报错
    "hasInjectionContext"isnotexportedby"node_modules/vue-demi/lib/index.mjs",importedby"node_modules/pinia/dist/pinia.mjs".11:36:19.397at../node_modules/pinia/dist/pinia.mjs:6:9 解决方法:把pinia降级 先删除pinianpmunipin......
  • uniapp uni-number-box组件 步长为1,还能输入小数思路分享
    正常情况,输入了步长为1,是无法在输入小数的。需求是要能输入一位小数,但如果直接步长设为0.1,又不能按1这样递增,输入数量上用起来肯定很麻烦。于是我就想了一个折中方法,步长设为:1.01,然后值改变的时候,change事件里,四舍五入,保留一位小数,这样就能实现点击输入框左右的加减,页面显示的......
  • uniapp专题学习(三)
    前言在uniapp专题学习(二)中学习到的知识点有viedo组件、form表单组件、navigator路由跳转以及page.json中的tabBar配置。vue语法之计算属性computed每一个计算属性都包含一个getter和一个setter,默认是利用getter来读取。所有getter和setter的this上下文自动地绑定为......
  • uniapp onShareAppMessage里面请求后调分享(微信小程序)
    onShareAppMessage(){constpromise=newPromise(resolve=>{request({api:'请求名',method:'POST',data:{"data":{}}}).then(res=>{resolve({......
  • uniapp 常用知识点
    1、原生导航栏(顶部)动态修改titleuni.setNavigationBarTitle({title:"賬號名稱"})2、原生导航栏(顶部)左边箭头默认是返回上一级,监听动态返回指定页面与data()同级//监听原生导航栏的发回按钮onBackPress(options){if(options.from==='navigateBack'){r......
  • uniapp报错集合
    1、swiper组件明明按照方法写了,却不起效果?排查发现,swiper组件宽度为0,设置swiper宽度即可2、报错Cannotreadproperty'forceUpdate'ofundefined原因为未配置小程序appid3、引用组件,明明目录里面有组件却报找不到?排查发现,引用地址正常,经过编译后在小程序中锁定的地址不正常......