学习Uni-app开发小程序Day21

学习了评分组件、自定义导航栏

评分组件uni-rate

在这里插入图片描述
这是需要达到的效果图,这里先分析下效果图,
1、图片是从布局中间弹出的,那这里就要用到uni-popup ,设置type从中间弹出
2、这个弹出的顶部和上一张的顶部布局是一样的,都是标题和关闭按钮,那就把上一张的布局拿过来
3、有用到评分,那就在直接使用评分组件,这里的评分是可以选择更改的,那就查看评分的文档,进行修改
4、底部有个按钮,这里是最后实现的效果图,原始图应该是刚进入的时候,是不能点击按钮的,只有进行评分后才能点击
下面是这里的样式

.scorePopup {background: #fff;background: #fff;padding: 30rpx;width: 70vw;border-radius: 30rpx;.content {padding: 30rpx 0;display: flex;justify-content: center;align-items: center;.text {color: #FFCA3E;padding-left: 10rpx;width: 80rpx;line-height: 1em;text-align: right;font-size: 28rpx;}}.footer {padding: 10rpx 0;display: flex;align-items: center;justify-content: center;}}

下面是页面布局

<uni-popup ref="scorePopup" type="center" :is-mask-click="false"><view class="scorePopup"><view class="popHeader"><view></view><view class="title">壁纸评分</view><view class="close" @click="clickScoreClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><view class="content"><uni-rate v-model="userScore" allowHalf  disabled-color="#FFCA3E" /><text class="text">{{userScore}}分</text></view><view class="footer"><button @click="submitScore" :disabled="!userScore " type="default" size="mini"plain>确认评分</button></view></view></uni-popup>

这里有个地方需要注意:
:is-mask-click=“false”,这是popup中的属性,设置这个的意思是,点击空白或者其他地方,不能让弹出框取消掉,只有点击设定的关闭图标才能取消掉

<uni-rate v-model="userScore" allowHalf  disabled-color="#FFCA3E" />
<text class="text">{{userScore}}分</text>

这里多说下,当初设置这里的时候,我是在下面设置了一个变量,想着是只要选择了星星,然后监听组件返回的值进行赋值,这里调用就可以了,但最后发现,虽然是实现了,但是后台报警告,查了半天,也不知道什么原因,最后还是复盘老师视频,才做了现在这种,这里就是rate的model和定义的变量名都是统一名称,然后也不用专门监听rate的@chang,直接在需要的地方,调用变量就可以,为什么这样,不清楚,先记录下。

至于点击确定的办法,这里就不写了,前面都有案例的。

自定义导航栏

这是自定义导航栏,使用的办法,就是在需要的页面,直接引用自定义组件就可以了,这里先发个效果图
在这里插入图片描述
这里就是自定义导航栏,

<template><view class="layout"><view class="navbar"><view class="statusBar"></view><view class="titleBar"><view class="title">标题</view><view class="search"><uni-icons class="icons" type="search" color="#888" size="18"></uni-icons><text class="text">搜索</text></view></view></view><view class="fill"></view></view>
</template><script setup></script><style lang="scss" scoped>
.layout{.navbar{ position: fixed;top: 0;left: 0;width: 100%;z-index: 10;//上面这几个属性,就是设置布局在顶部不会随着滑动而改变位置background: //这就是背景渐变linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8); .statusBar{border: 1px solid red;}.titleBar{display: flex;padding: 0 30rpx;border: 1px solid green;align-items: center;.title{font-size: 22rpx;font-weight: 700;color: $text-font-color-1;}.search{width: 220rpx;height: 50rpx;border-radius: 60rpx;background: rgba(255, 255, 255,0.4);border: 1px solid #fff;margin-left: 30rpx;color: #999;font-size: 28rpx;display: flex;.text{padding-left: 10rpx;}.icons{margin-left:5rpx;}}}}
}
</style>

上面是自定义导航栏的代码,但在实际使用过程中,还是发现有些其他的问题,手机的状态栏会遮住状态栏,这里还没有学到,就只记录到这里!
明天的记录中会有计算状态栏的高度等。

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

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

相关文章

水电表远程抄表:智能化时代的能源管理新方式

1.行业背景与界定 水电表远程抄表&#xff0c;是随着物联网技术发展&#xff0c;完成的一种新型的能源计量管理方式。主要是通过无线传输技术&#xff0c;如GPRS、NB-IoT、LoRa等&#xff0c;将水电表的信息实时传输到云服务器&#xff0c;进而取代了传统人工当场抄水表。这种…

目标检测——家庭日常用品数据集

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …

CentOS 7如何使用systemctl管理应用

说明&#xff1a;本文介绍如何使用systemctl命令的方式来启动、查看、停止和重启应用&#xff0c;以安装后的prometheus、alertmanager为例&#xff1b; Step1&#xff1a;创建文件 在系统/etc/systemd/system/路径下&#xff0c;创建一个xxx.service文件&#xff0c;该文件内…

【最优化方法】实验二 一维搜索方法的MATLAB实现

实验二  一维搜索方法的MATLAB实现 实验的目的和要求&#xff1a;通过本次实验应使学生掌握如何使用MATLAB软件进行一维搜索&#xff0c;并学会对具体问题进行分析。 实验内容&#xff1a; &#xff11;、0.618法的MATLAB实现 &#xff12;、Fibonacci法的MATLAB实现 学…

机器学习(五) -- 监督学习(4) -- 集成学习方法-随机森林

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;3&#xff09; -- 决策树 下篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;5&#xff09; -- 线性回归1 前言 tips&#xff1a;标题前有“***”…

150.二叉树:二叉树的后序遍历(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr, right(nullptr) {}* Tree…

Autoware 技术代码解读(三)

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&#xff0c;并附带200G…

​一款开源的.NET程序集反编译、编辑和调试神器

前言 说到.NET相关的反编译工具大家脑海里第一个想到的工具是什么&#xff1f;ILSpy、dnSpy、还是dotPeek&#xff1f;咱们今天的主要内容是讲讲dnSpyEx&#xff08;dnSpyEx是dnSpy项目的非官方Fork维护版本&#xff09;这个开源的.NET程序集反编译、编辑和调试工具该如何使用…

Burnout Drift Multiplayer(多人赛车游戏模板)

Burnout Drift Multiplayer是一个完整的项目,已在PC、Android、iOS和WebGL上发布的Burnout Drift系列中使用。 [包括最新版本的Realistic Car Controller Pro] PC、WebGL和Android演示 包括Burnout Drift系列的所有功能。您只需几分钟即可轻松添加自己的车辆、场景和配乐。 警…

Windows 下载安装Apache

一、官网下载 1、打开Apache官网http://httpd.apache.org&#xff0c;点击Download。 2、选择Windows版本&#xff0c;点击链接。 3、选择对应版本选择下载。 二、安装、设置 1、将下载好的解压。 2、依次打开Apache24-conf-httpd.conf,用记事本打开 1)、修改路径 2)、修改…

mysql去除重复数据

需求描述 doc表有很多重复的title,想去除掉重复的记录 表结构 CREATE TABLE doc (id INT PRIMARY KEY,title VARCHAR(255),content TEXT );去重SQL -- 创建临时表 CREATE TEMPORARY TABLE temp_doc AS SELECT * FROM doc WHERE 10;-- 插入唯一的记录&#xff08;每个title最…

[数据集][目标检测]红外兔子检测数据集VOC+YOLO格式96张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;96 标注数量(xml文件个数)&#xff1a;96 标注数量(txt文件个数)&#xff1a;96 标注类别数…

Redis 源码学习记录:散列 (dict)

散列 Redis 源码版本&#xff1a;Redis-6.0.9&#xff0c;本篇文章的代码均在 dict.h / dict.c 文件中。 散列类型可以存储一组无需的键值对&#xff0c;他特别适用于存储一个对象数据。 字典 Redis 通常使用字典结构体存储用户散列数据。字典是 Redis 的重要数据结构。除了散…

java大学城水电管理系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的大学城水电管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 大学城水电管理系统的…

PHP对接百度语音识别技术

PHP对接百度语音识别技术 引言 在目前的各种应用场景中&#xff0c;语音识别技术已经越来越常用&#xff0c;并且其应用场景正在不断扩大。 百度提供的语音识别服务允许用户通过简单的接口调用&#xff0c;将语音内容转换为文本。 本文将通过PHP语言集成百度的语音识别服务…

批量视频剪辑神器:高效提取随机秒数画面,轻松实现视频素材精准筛选!

在数字化时代&#xff0c;视频内容已成为我们生活中不可或缺的一部分。无论是个人创作者还是专业团队&#xff0c;都需要对视频素材进行高效处理。然而&#xff0c;面对大量的视频文件&#xff0c;如何快速提取出我们所需的画面片段&#xff0c;却成为了一个令人头疼的问题。今…

【源码】【海外客服】简洁版海外客服系统/在线客服系统/即时聊天通讯源码

1&#xff0c;此版本采用前台一人或多人与后台一人&#xff08;管理员&#xff09;进行会话模式 2&#xff0c;此版本前后台只能发送文字和图片&#xff08;图片是选择后自动发送&#xff09; 3&#xff0c;前后台根据IP来识别不同的会话者 4&#xff0c;前台发起会话后&…

大数据——Spark

1.Spark MLlib概述 MLlib是Spark的机器学习&#xff08;Machine Learning&#xff09;库&#xff0c;旨在简化机器学习的工程实践工作&#xff0c;并方便扩展到更大规模。 MLlib由一些通用的学习算法和工具组成&#xff0c;包括分类、回归、聚类、协同过滤、降维等&#xff0…

学习Uni-app开发小程序Day20

今天学习了&#xff1a;页面的渐变背景、使用deep修改子组件样式、全屏页面absolute定位布局和fit-content内容宽度、遮罩层状态转换及日期格式化、uni-popup弹窗层制作弹出信息 页面的渐变背景 需要设置页面背景&#xff0c;使用的是多个页面&#xff0c;这样就可以把背景做…

开源自定义表单系统源码 一键生成表单工具 可自由DIY表单模型+二开

分享一款开源自定义表单系统源码&#xff0c;能够实现99%各行业的报名、预约、加盟申请、调查等应用&#xff0c;而且同时多开创建多个表单&#xff0c;支持自定义各种字段模型&#xff0c;市面上需要的表单模型都含了&#xff0c;随便自定义啦&#xff0c;含完整的代码包和详细…