学习Uni-app开发小程序Day13

发布于:2024-05-16 ⋅ 阅读:(25) ⋅ 点赞:(0)

今天学习了uni-app的api下的界面,

交互反馈

showToast和hideToast

showToast,这是消息提示框,使用方法是:uni.showToast(){}
hideToast,这是取消提示框的,使用的方法是:uni.hideToast()

<template>
	<view class="content">
		<navigator open-type="switchTab" url="/pages/user/user">跳转用户页面</navigator>

		<button @click="show">显示</button>
		<button @click="hide">隐藏</button>
	</view>
</template>

<script setup>
	function show() {
		uni.showToast({
			title: "操作成功",
			// 默认是success,是成功
			icon: 'success',
			// 可以设置失败
			// title:"操作失败",
			// icon:'error',
			// title默认是只能显示7个字,在小程序中只能显示一行,如果要显示多个字的时候,需要把icon设置成,none
			// title:"今天是星期三,在上两天班就放假了",
			// icon:'none',
			// 设置显示的时长
			duration: 5000,
			// 设置一个图标
			image: "../../static/logo.png",
			// 默认是false,这个功能就是当出现弹出窗的时候,页面是否可以操作其他,设置成true,是不能操作其他的
			// 这里穿插下,页面跳转,在使用navigator的时候,跳转不能直接跳转到tabBar中,需要设置open-type
			mask: true
		})
	}
	function hide(){
		uni.hideToast();
	}
</script>

showLoading和hideLoading

这是加载提示框,虽然showToast也能实现,但是需要设置显示时长,这个一般是获取网络数据的时候使用的,如果设置了时长,不一定能达到效果,因此是有专门的api来使用加载过程
使用的方法和showToast相同,,hideLoading是取消显示,这个是网络请求成功或者失败都可以让提示框关闭。

<template>
	<view class="">
		个人中心
	</view>
</template>

<script setup>
	uni.showLoading({
		title:"加载中...",
		// 添加了mask后,页面是不能点击的
		mask:true
	})
	// 这里添加定时器,是为了验证加载框
	setInterval(()=>{
		uni.hideLoading();
	},6000)
</script>

showModal

显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。

<template>
	<view class="">
		<button @click="dele">删除</button>
	</view>
</template>
<script setup>
import { ref } from 'vue';
	function dele(){
		uni.showModal({
			title:'是否删除', //提示的标题
			content:'这是删除,不会在有了',//提示的内容
			showCancel:true,//是否显示取消按钮,默认为 true
			cancelText:'不删除了',//取消按钮的文字,默认为"取消"
			cancelColor:'red',//取消按钮的文字颜色,默认为"#000000"
			confirmText:'真要删除',//确定按钮的文字,默认为"确定"
			confirmColor:'#0000cd',//确定按钮的文字颜色,H5默认为"#007aff",微信小程序默认为"#576B95",百度小程序默认为"#3c76ff"
			editable:false,//是否显示输入框
			placeholderText:"请填写删除原因",//显示输入框时的提示文本
			//当不显示输入框的时候,这里的ref就监听点击的是确定按钮还是取消按钮,
			// 当点击了确定按钮:ref.confirm=true
			// 当点击了取消按钮:ref.cancel=true
			// 如果添加了输入框后,ref获取输入的内容是在:content中,获取方式:ref.content
			// success: function(ref){
			// 	if(ref.confirm){uni.showToast({
			// 		title:"删除成功了"
			// 	})}
			// };
			// success还有一种写法:
			success:ref=>{
				if(ref.confirm)uni.showToast({
					title:"成功"
				})
			}
		})
	}
</script>

根据官方文档,这里有需要注意的地方,
弹框同时使用确定取消时,需注意不同平台的确认取消按钮位置不同。在微信、H5中,确认按钮默认在右边。在App中,iOS的确认按钮默认在右边,而Android默认在左边。产生这种差异的原因是uni.showModal在App和小程序上调用的是原生提供的弹出框,原生平台的策略本身就不同。如果需要调整,可以通过自行控制按钮的文字,即“确定”按钮的文字其实可以设置为“取消”;
showModal不满足需求时,可以自行开发组件弹框。插件市场有很多自定义弹框的组件,需注意在非H5平台,前端组件无法覆盖原生组件(如地图、video),遮罩也无法盖住tabbar和navigationbar。如需覆盖原生组件或遮罩tabbar等,App端推荐使用subNvue;
小程序平台,cancelText和confirmText有长度限制,最多允许 4 个字符;
钉钉小程序真机与模拟器表现有差异,真机title,content均为必填项
各家小程序平台对于 confirm、cancel 字段返回规则可能不尽相同,包含两种情况:{ confirm: true, cancel: false } 或 { confirm: true },但并不影响使用 if 去做判断

showActionSheet

这是从底部向上弹出操作菜单
这里添加一个按钮,点击后出现弹出框,然后选择后在页面显示出来

<template>
	<view>
		<button @click="learn">学历</button>
		<text>{{learnName}}</text>
	</view>
</template>

<script setup>
	let arry = ["高中", "大专", "本科", "研究生"];
	const learnName=ref("");
	function learn() {
		uni.showActionSheet({
			title: "提示框", //菜单标题
			alertText: "警示文案", //警示文案(同菜单标题),只在小程序真机有用
			// itemList  按钮的文字数组
			itemList: arry,
			// itemColor 按钮的文字颜色,字符串格式,默认为"#000000"
			itemColor: "red",
			// popover:ccc  ,//大屏设备弹出原生选择按钮框的指示区域,默认居中显示,详细说明:top(指示区域坐标,使用原生 navigationBar 时一般需要加上 navigationBar 的高度)、left(指示区域坐标)、width(指示区域宽度)、height(指示区域高度),
			// success 接口调用成功的回调函数,详见返回参数说明  参数:tapIndex.用户点击的按钮,从上到下的顺序,从0开始
			success: ref => {
				console.log(ref);
				learnName.value=arry[ref.tapIndex];
			}
		})
	}
</script>

这就把界面下的交互反馈学完了,这几个交互使用的频率高,使用也简单
加油!!!


网站公告

今日签到

点亮在社区的每一天
去签到