学习Uni-app开发小程序Day13

今天学习了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-typemask: 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,//是否显示取消按钮,默认为 truecancelText:'不删除了',//取消按钮的文字,默认为"取消"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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用C++11实现Golang的defer功能

本文主要用C11标准来实现Golang的defer功能。 背景 目前笔者的主力语言是Golang&#xff0c;其次是C&#xff0c;再次是JS、Delphi。在Golang工程中大量使用了defer关键字实现函数的延迟调用。如打开文件的出错处理。近来在C工程中遇到类似需求&#xff0c;在函数返回时进行某…

【ARMv8/v9 系统寄存器 6 -- EL 异常等级判定寄存器 CurrentEL 使用详细将介绍】

文章目录 ARMv8/v9 EL 等级获取EL 等级获取函数实现EL 等级获取测试 ARMv8/v9 EL 等级获取 下面这个宏定义是用于ARMv8/v9架构下&#xff0c;通过汇编语言检查当前执行在哪个异常级别&#xff08;Exception Level&#xff0c;EL&#xff09;并据此跳转到不同的标签。 异常级别…

【数据库】银行转账并发问题

假设账户A的余额是200&#xff0c;B、C分别给A转账100&#xff0c;A自己又消费了50&#xff0c;期望A的余额是350&#xff0c;那么如何做才能确保数据的一致性&#xff1f; 做法1&#xff1a;在代码里加同步锁&#xff08;推荐&#xff09; synchronized (lock) {try {// 查账…

svn批量解锁

问题 svn对文件进行checkout之后&#xff0c;先进行lock&#xff0c;之后再去更改&#xff0c;最后进行Commit操作&#xff1b; 上述为我们通过svn管理代码的正常方式&#xff0c;但总会有其他现象发生&#xff1b; 如果我们非正常操作&#xff0c;批量锁所有的svn文件&#x…

验证控件的学习

在ASP.NET Web Forms中&#xff0c;验证控件用于确保用户输入的数据满足特定的条件。ASP.NET 提供了一系列内置的验证控件&#xff0c;这些控件可以在服务器端或客户端执行验证。以下是一些常见的验证控件及其用法&#xff1a; RequiredFieldValidator&#xff1a;确保字段不为…

阿里云 服务之前设置的密钥登陆,关闭了密码登录,现在打开密码登录

通过网页远程链接 切换用户 sudo -i 输入vim /etc/ssh/sshd_config 进入配置文件 找到 将这一项设置为yes 重启系统 systemctl restart sshd.service

vivo X100s发布,搭载最新天玑9300+平台

在沉寂了半年后&#xff0c;vivo终于发布了新的旗舰产品。相较于前代的X100&#xff0c;X100s作为小迭代也有不少让人眼前一亮的地方&#xff0c;下面就让我们一同来了解下吧。 外观方面&#xff0c;虽然vivo X100s相较于X100没有大改&#xff0c;但却十分具有质感。以“青云”…

路径优化算法 | 基于遗传算法求解多式联运运输问题

内容 多式联运运输问题是一个复杂的组合优化问题,其中涉及到多种不同的运输方式和路径选择。遗传算法是一种常用的启发式优化算法,可以用于求解这类问题。 下面是基于遗传算法求解多式联运运输问题的一般步骤: 确定问题的数学模型:将多式联运运输问题转化为数学模型,包…

每周一算法:恰好经过K条边的最短路

题目描述 牛站 给定一张由 M M M 条边构成的无向图&#xff0c;点的编号为 1 ∼ 1000 1\sim 1000 1∼1000 之间的整数。 求从起点 S S S 到终点 E E E 恰好经过 K K K 条边&#xff08;可以重复经过&#xff09;的最短路。 注意: 数据保证一定有解。 输入格式 第 1 …

[牛客网]——C语言刷题day3

答案&#xff1a;A 解析&#xff1a; A.表示将数组a的首地址赋值给指针变量p B.将一个int型变量直接赋值给一个int型的指针是不行的 C.道理同B D.j2是一个右值&#xff0c;右值是不能进行取地址操作的 #include <iostream> using namespace std;#define N 7 int fun…

前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前言&#xff1a; 扩展运算符又称为Rest运算符&#xff0c;可以实现数组、对象、字符串在语法层面上的展开&#xff0c;达到简化语法的目的&#xff0c;使得我们提高开发效率 主要用法&#xff1a; 在需要解构的变量前加三个点&#xff08;...xxx&#xff09; 具体示例&…

Spring整合Junit(单元测试)

在软件开发过程中&#xff0c;单元测试是保证代码质量和功能完整性的重要手段之一。Spring框架提供了便捷的方式来管理和执行单元测试&#xff0c;并且与JUnit框架的整合非常简单。本文将介绍如何在Spring应用程序中整合JUnit进行单元测试&#xff0c;并提供一个简单的示例来演…

快速查看字符对应的ASCII码

1、借助gdb查看 打印字符串用双引号括起来打印单个字符用单引号括起来x 表示十六机制d 表示十进制t 表示二进制 2、借助二进制查看软件 第一步&#xff1a;把要查看的字符保存到文本文件中第二步&#xff1a;借助二进制查看工具&#xff08;比如&#xff1a;Hex Editor Neo&am…

【原创】尽量使用标准 json 格式替换 jsonl 以避免 datasets 包引入数据时处理报错

文章目录 问题发现问题解决问题回看 问题发现 使用 LLaMA-Factory 以 ORPO 方式训练模型&#xff0c;数据集习惯性按照 jsonl 的格式组织。 突然在读取数据阶段报错&#xff0c;且是很少见的 TypeError。对照官方模板没发现问题出在哪&#xff0c;又从内容层面做了初步排除&am…

网络安全护网行动:形式主义还是真有价值?

中国每年都投入大量人力物力进行护网行动&#xff0c;如网络攻防演练、黑客技术研究等。有人质疑这些行动是否只是形式主义&#xff0c;缺乏真正的价值。然而&#xff0c;本文将深入解释这些护网行动的原因&#xff0c;并阐明其对信息安全发展的真实价值。 网络信息安全问题的…

自养号测评实战指南:Shopee、Lazada销量翻倍不再是难题

对于速卖通、亚马逊、eBay、敦煌网、SHEIN、Lazada、虾皮等平台的卖家而言&#xff0c;提高店铺流量并转化为实际销量是共同追求的目标。在这个过程中&#xff0c;自养号进行产品测评显得尤为重要。通过精心策划和执行的测评活动&#xff0c;卖家不仅能够显著增加产品的销量&am…

Google Chrome 设备工具栏原理

1.不同预览模式 2.计算出缩放比 3.固定滚动偏移 关键代码&#xff1a; overview&#xff1a; ratioW getChildRect().width / getParentRect().width ratioH getChildRect().height / getParentRect().height maxRatio max(ratioW, ratioH) if(maxRatio < 1) return 1 …

生产车间PDA应用的规划

作为IT经理,在规划生产车间的PDA应用时,需要考虑的IT基础设施方面的前提条件。以下是一些关键的考虑因素,包括要点、实例和参考数据: 01、Infra 的前提条件 1. **网络基础设施**: - **无线覆盖**:确保车间有全面的无线信号覆盖,比如使用Wi-Fi 6技术,提供至少1Gbps的…

GPRS与4G网络的技术差异与应用选择

在移动通信的发展历程中&#xff0c;GPRS&#xff08;General Packet Radio Service&#xff09;和4G&#xff08;Fourth-Generation&#xff09;技术都扮演着举足轻重的角色。虽然两者都旨在提供无线数据传输服务&#xff0c;但在数据传输速率、延迟和覆盖范围等方面&#xff…

计算机网络实验3:路由器安全防控配置

实验目的和要求 理解标准IP访问控制列表的原理及功能理解CHAP、DHCP配置原理了解家用式无线路由配置方法实验项目内容 标准IP访问控制列表配置 CHAP验证路由器上配置DHCP网络地址转换NAT配置无线路由实现实验环境 1. 硬件&#xff1a;PC机&#xff1b; 2. 软件&#xff1a;W…