uniapp学习（005-1 详解Part.1）

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第36p-第p40的内容

文章目录

    • 响应式尺寸单位 rpx
      • 各种工具修改ui给的图片的宽度
        • ps操作步骤
        • 即时设计操作步骤：
    • 导入css样式
      • uni.scss
      • 自定义scss文件 并且使用uni.scss进行引用
    • 页面路由
      • globalStyle(全局样式)
        • 设置导航背景颜色和文字颜色
        • 设置全局标题
        • 隐藏导航栏
        • 开启下拉刷新
        • 触底刷新
      • pages
        • 给单独页面设置导航颜色
        • pages的顺序 排列第一的 会在首页展示
        • 单独页面下拉刷新功能
      • 底部tabBar导航
        • 底部导航数 最低2个最多5个
        • 添加
        • 也可以设置到上面（仅微信小程序支持）
        • 添加图标

响应式尺寸单位 rpx

在这里插入图片描述
rpx是按照屏幕大小为750像素的宽度；即750rpx占整个屏幕的宽度，屏幕的大小变化 会根据750px进行等比例放大缩小
750是默认苹果6的像素大小 开发一般按照都是苹果6的尺寸来的

各种工具修改ui给的图片的宽度

如果ui给的图片的宽度不是750px，我们可以用各种工具进行缩放

ps操作步骤

在这里插入图片描述
长宽锁定 调整大小 即可
在这里插入图片描述

即时设计操作步骤：

在这里插入图片描述

在这里插入图片描述
锁定宽高 改成750 即可
在这里插入图片描述

也可以设置字体大小 这里的字体大小是52 我们设计程序的时候就可以写成52rpx
在这里插入图片描述

在这里插入图片描述

导入css样式

样式来说 App.vue的权重低于页面权重（就近原则）

在这里插入图片描述

在这里插入图片描述

uni.scss

这个文件定义了许多uniapp的变量 可以直接在别的文件里进行引用
在这里插入图片描述

引用

在这里插入图片描述

在这里插入图片描述

也可以在uni.scss里进行自定义设置颜色等变量，添加后需要重启程序 否则可能会导致小程序报错
在这里插入图片描述

自定义scss文件 并且使用uni.scss进行引用

在这里插入图片描述

切记@import 结束的时候要加分号
在这里插入图片描述

页面路由

在这里插入图片描述
在这里插入图片描述

globalStyle(全局样式)

在这里插入图片描述

在这里插入图片描述

设置导航背景颜色和文字颜色

在这里插入图片描述

设置全局标题

如果使用全局标题的话 前面页面没有设置页面名称的都会显示这个
在这里插入图片描述

隐藏导航栏

navigationStyle:"custom"添加后 导航栏会消失（不希望消失的话不要写）
在这里插入图片描述
小技巧：使用qq截图的时候 鼠标放的地方按住ctrl+c 可以copy出十六进制的颜色，只按c可以copy出RGB颜色
在这里插入图片描述

开启下拉刷新

在这里插入图片描述

开启下拉刷新
在这里插入图片描述

在这里插入图片描述

下拉刷新 可以看到背景颜色
在这里插入图片描述

触底刷新

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

还可以设置距离底部多少像素进行触发
在这里插入图片描述
在这里插入图片描述

pages

在这里插入图片描述

在这里插入图片描述

给单独页面设置导航颜色

在这里插入图片描述

在这里插入图片描述

pages的顺序 排列第一的 会在首页展示

在这里插入图片描述
在这里插入图片描述

单独页面下拉刷新功能

可以全局不设置、单独页面设置true 只这一页进行下拉刷新
也可以 全局设置都有刷新，单独页面设置false，这页不刷新

底部tabBar导航

在这里插入图片描述

底部导航数 最低2个最多5个

在这里插入图片描述

在这里插入图片描述

添加

在这里插入图片描述

在这里插入图片描述

也可以设置到上面（仅微信小程序支持）

在这里插入图片描述
在这里插入图片描述

添加图标

可以去iconfont网站搜索一些矢量图标 iconfont-阿里巴巴矢量图标库
在这里插入图片描述
可以下载多种颜色的 进行切换使用
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

我们放到static文件夹的images里
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

高级算法设计与分析 学习笔记13 线性规划

高级算法设计与分析 学习笔记13 线性规划

注意是线性规划不是动态规划哦 好家伙，这不是凸优化吗？ 凸优化标准形式： 先改成统一最大化（凸优化那边怎么是统一最小化？） 原来的x2正负无所谓，但我希望每个x都是有限制的，所以把它改…
阅读更多...
高德开放平台API调用实战指南

高德开放平台API调用实战指南

本文 一、地图展示1.1 地图初始化与展示1.2 自定义标记 二、路线规划2.1 驾车路线规划2.2 步行路线规划 三、定位服务3.1 使用JavaScript API进行定位3.2 IP定位 四、实时交通信息查询4.1 获取实时交通路况 五、智能调度引擎总结 一、地图展示 地图展示是开发基于地理信息系统…
阅读更多...
【MySQL】设置二进制日志文件自动过期，从根源上解决占满磁盘的问题：通过修改 binlog_expire_logs_seconds 配置项

【MySQL】设置二进制日志文件自动过期，从根源上解决占满磁盘的问题：通过修改 binlog_expire_logs_seconds 配置项

引言 MySQL的二进制日志（binlog）文件记录了数据库中所有更改的详细信息，包括但不限于对数据的插入、删除、更新，对表和数据库的创建、更改、删除等操作。每一次这样的操作都会在二进制日志中生成一个新的日志事件，并被…
阅读更多...
【Linux】命令行下的增删查改之“查看”

【Linux】命令行下的增删查改之“查看”

致谢:Linux常用命令大全(手册) – 真正好用的Linux命令在线查询网站 提供的命令查询 头部内容获取(head) head命令的功能是显示文件开头的内容，默认值为前10行。 指令参数： -n 定义显示行数 -c 指定显示头部内容的字符数 -v 总是显示文件名的头信…
阅读更多...
实现双向链表的增删改查

实现双向链表的增删改查

头文件 #pragma once #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdlib.h> #include <stdbool.h> typedef int LTDataType; typedef struct ListNode {LTDataType data;struct ListNode* prev;struct ListNode* next; } LTNode; //v…
阅读更多...
matlab输入汉字时，输入法在左上角显示解决办法

matlab输入汉字时，输入法在左上角显示解决办法

解决方法&#xff1a; 输入汉字时输入法在左上角显示&#xff08;如图1&#xff09;&#xff0c;将鼠标放在竖着的小点处拖动到工作区合适位置&#xff08;如图2&#xff09;&#xff0c;下次输入汉字时输入法便在图2处显示。 图1 图2
阅读更多...
如何测试IP速度？

如何测试IP速度？

了解代理的连接速度是否快速是确保网络使用效率和体验的关键因素之一。本文来为大家如何有效地评估和测试代理IP的连接速度&#xff0c;以及一些实用的方法和工具&#xff0c;帮助用户做出明智的选择和决策。 一、如何评估代理IP的连接速度 1. 使用在线速度测试工具 为了快速…
阅读更多...
OpenCV高级图形用户界面(6)获取指定窗口中图像的矩形区域函数getWindowImageRect()的使用

OpenCV高级图形用户界面(6)获取指定窗口中图像的矩形区域函数getWindowImageRect()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 提供窗口中图像的矩形区域。 该函数 getWindowImageRect 返回图像渲染区域的客户端屏幕坐标、宽度和高度。 函数原型 Rect cv::getWindowImage…
阅读更多...
Vue详细入门（语法【一】）

Vue详细入门（语法【一】）

今天滴学习目标&#xff01;&#xff01;&#xff01; Vue1. 什么是Vue.js2. Vue是怎么使用的嘞3. MVVM是什么嘞&#xff1f;4. Vue有哪些指令1. v-bind2.v-model3.v-if 和 v-else4. v-for5. v-show6. v-on 咱们先了解一下什么是Vue&#xff0c;Vue是怎么使用的嘞&#xff0c;V…
阅读更多...
甘特图基线-用起来了吗~

甘特图基线-用起来了吗~

管理项目无疑是一项充满挑战的任务&#xff01;每个项目都伴随着严格的截止日期&#xff0c;因此&#xff0c;确保项目按时完成&#xff0c;并在推进过程中一一达成所有关键的里程碑&#xff0c;显得尤为重要。 为了更精准地掌握项目进展&#xff0c;利用甘特图的基线功能来捕捉…
阅读更多...
【华为HCIP实战课程十三】OSPF网络中3类LSA及区域间负载均衡，网络工程师

【华为HCIP实战课程十三】OSPF网络中3类LSA及区域间负载均衡，网络工程师

一、ABR SW1查看OSPF ABR为R4而非R3，因为R4连接骨干区域0，R3没有连接到区域0 R6查看OSPF路由： 二、查看3类LSA，由于R6不是ABR因此自身不会产生3类LSA 但是有区域间路由就可以看到3类LSA
阅读更多...
SpringMVC之 文件上传和下载

SpringMVC之 文件上传和下载

1. 文件上传 1.1 前端注意事项 文件上传操作&#xff0c;前端的表单项需要如下三项设置&#xff1a; &#xff08;1&#xff09;input标签的type属性应设置为file&#xff0c;并且注意不要在input标签中设置value属性&#xff0c;因为这可能导致文件上传不成功&#xff1b; …
阅读更多...
【LeetCode:1160. 拼写单词 + 哈希表】

【LeetCode:1160. 拼写单词 + 哈希表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
Spring Boot框架下的电影评论系统设计

Spring Boot框架下的电影评论系统设计

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理电影评论网站的相关信息成为必然。开发合适…
阅读更多...
【算法题】数组中只出现一次的两个数字

【算法题】数组中只出现一次的两个数字

数组中只出现一次的两个数字 1. 题目2. 思路2.1 哈希表2.2 位运算 1. 题目 标签: 哈希表, 位运算. 2. 思路 2.1 哈希表 最简单的方法肯定是用哈希表, 遍历一遍数组找到只出现一次的两个数字. 相关代码就不贴了. 不过这样的话空间复杂度是 O(n), 太高了. 2.2 位运算 另一个…
阅读更多...
多进程编程

多进程编程

使用父子进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;两个进程同时进行 #include<myhead.h>//获取拷贝文件的字节数 int get_file_len(const char* file1,const char* file2) {//以只读形式打开需要读取的文件int fd1 …
阅读更多...
【最新华为OD机试E卷-支持在线评测】模拟目录管理 (200分)多语言题解-(Python/C/JavaScript/Java/Cpp)

【最新华为OD机试E卷-支持在线评测】模拟目录管理 (200分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ，一枚热爱算法的程序员 💻 ACM金牌🏅️团队 ｜ 大厂实习经历 ｜ 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…
阅读更多...
Golang笔记_day08

Golang笔记_day08

Go面试题&#xff08;一&#xff09; 1、空切片 和 nil 切片 区别 空切片&#xff1a; 空切片是指长度和容量都为0的切片。它不包含任何元素&#xff0c;但仍然具有切片的容量属性。在Go语言中&#xff0c;可以使用内置的make函数创建一个空切片&#xff0c;例如&#xff1a;…
阅读更多...
【思维导图】C语言—常见概念

【思维导图】C语言—常见概念

hello&#xff0c;友友们&#xff0c;今天我们进入一个新的专栏——思维导图&#xff01; 思维导图帮助我们复习知识的同时建构出一个清晰的框架&#xff0c;我往后会不断更新各个专栏的思维导图&#xff0c;关注我&#xff0c;一起加油&#xff01; 今天我们回顾C语言中的常见…
阅读更多...
【C++贪心】2712. 使所有字符相等的最小成本|1791

【C++贪心】2712. 使所有字符相等的最小成本|1791

本文涉及知识点 C贪心 LeetCode2712. 使所有字符相等的最小成本 给你一个下标从 0 开始、长度为 n 的二进制字符串 s &#xff0c;你可以对其执行两种操作&#xff1a; 选中一个下标 i 并且反转从下标 0 到下标 i&#xff08;包括下标 0 和下标 i &#xff09;的所有字符&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023