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.mzph.cn/pingmian/56082.shtml

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

相关文章

Cherno游戏引擎笔记（61~72）

Cherno游戏引擎笔记（61~72）

---------------一些维护和更改------------- 》》》》 Made Win-GenProjects.bat work from every directory 代码更改： echo off->pushd ..\->pushd %~dp0\..\call vendor\bin\premake\premake5.exe vs2019popdPAUSE 为什么要做这样的更改？ …
阅读更多...
特征点检测与匹配是计算机视觉中的基础任务之一，广泛应用于图像配准、物体识别、运动估计、三维重建等领域。

特征点检测与匹配是计算机视觉中的基础任务之一，广泛应用于图像配准、物体识别、运动估计、三维重建等领域。

特征点检测与匹配是计算机视觉中的基础任务之一，广泛应用于图像配准、物体识别、运动估计、三维重建等领域。下面是一些关键的知识点： 1. 特征点检测 特征点检测的目的是从图像中找到独特的、稳定的点，这些点在图像变化（如旋转、…
阅读更多...
Caffeine+Redis两级缓存架构

Caffeine+Redis两级缓存架构

CaffeineRedis两级缓存架构 在高性能的服务项目中，我们一般会将一些热点数据存储到 Redis这类缓存中间件中，只有当缓存的访问没有命中时再查询数据库。在提升访问速度的同时，也能降低数据库的压力。 但是在一些场景下单纯使用 Redis 的分布…
阅读更多...
Redis登录校验

Redis登录校验

登录拦截器 第一个拦截器只是确保一切请求都要进行token刷新的大动作 第二个拦截器从ThreadLocal中获取user用户 缓存一致性如何解决 并发情况下发生缓存不一致的问题，主要是因为写数据库和写缓存不是原子的 先写缓存，再写数据库 先写数据库&#xff…
阅读更多...
大厂面试真题-微服务有什么缺点

大厂面试真题-微服务有什么缺点

微服务架构在提供诸多优势的同时，也伴随着一些显著的缺点和挑战。以下是对微服务缺点的详细归纳： 一、操作复杂性增加 微服务架构将一个大型应用程序分解为多个小型服务，这导致系统整体的复杂度显著提高。需要管理更多的服务实例、网络通信…
阅读更多...
thinkphp阿里云发送短信验证码,存储到缓存中完成手机号验证

thinkphp阿里云发送短信验证码,存储到缓存中完成手机号验证

源码demo下载地址 https://download.csdn.net/download/hanzhuhuaa/89865893 或者也可以在文章中查看demo源码 ↓ 第一步安装阿里云 SDK 您可以使用 Composer 来安装阿里云的 SDK。在项目目录中运行： composer require alibabacloud/sdk第二步发送短信 namespace app\api\c…
阅读更多...
根据注释软件结果从ICTV中获取物种完整注释（python代码）

根据注释软件结果从ICTV中获取物种完整注释（python代码）

比如病毒注释软件注释到了： Viruses;Phixviricota;Malgrandaviricetes;Petitvirales;Microviridae;; import os import pandas as pd# 设置工作区 os.chdir("folder") dir_ls os.listdir()# 把ICTV物种表保存为df ICTV_txt "ICTV去冗余.txt"…
阅读更多...
Linux下Git操作

Linux下Git操作

一、基本命令 1、创建 git 目录（工作区） mkdir gitcode 2、创建本地仓库，生成 .git 隐藏目录 git init 3、设置配置项 git config user.name "xxx" git config user.email "....." 4、查看配置项 git config -l …
阅读更多...
QD1-P14 HTML 输入标签（input）

QD1-P14 HTML 输入标签（input）

本节学习 HTML 常用标签&#xff1a;input 输入标签 ‍ 本节视频 www.bilibili.com/video/BV1n64y1U7oj?p14 ‍ 知识点 1&#xff1a;简单示例 HTML <!DOCTYPE html> <html><head><meta charset"utf-8"><title>P14-input标签<…
阅读更多...
git add 、 git commit、git push 、git stash、git reset --hard HEAD用法

git add 、 git commit、git push 、git stash、git reset --hard HEAD用法

下面是 git 中常见的几个命令的作用解释&#xff1a; git add&#xff1a; 这个命令用于将文件添加到暂存区&#xff08;Staging Area&#xff09;。它的意思是你标记了文件&#xff0c;将其准备好提交到仓库中。只有在执行 git add 后&#xff0c;文件的更改才能包含在下一次提…
阅读更多...
在中国使用AWS服务器的法律要求与注册公司问题

在中国使用AWS服务器的法律要求与注册公司问题

随着云计算技术的迅猛发展&#xff0c;亚马逊网络服务&#xff08;AWS&#xff09;逐渐成为企业和开发者的首选平台。然而&#xff0c;当涉及到在中国境内使用AWS服务器时&#xff0c;许多人会关注一个重要问题&#xff1a;是否需要注册公司才能在中国运营AWS服务器&#xff1f…
阅读更多...
Elasticsearch 实战应用

Elasticsearch 实战应用

Elasticsearch 实战应用 引言 Elasticsearch 是一个分布式、RESTful 风格的搜索和分析引擎&#xff0c;能够快速、实时地处理大规模数据&#xff0c;广泛应用于全文搜索、日志分析、推荐系统等领域。在这篇博客中&#xff0c;我们将从 Elasticsearch 的基本概念入手&#xff…
阅读更多...
【华为】配置BGP协议

【华为】配置BGP协议

边界网关协议BGP是一种实现自治系统AS之间的路由可达&#xff0c;并选择最佳路由的距离矢量路由协议。BGP在不同自治系统之间进行路由转发&#xff0c;分为EBGP&#xff08;外部边界网关协议&#xff09;和IBGP&#xff08;内部边界网关协议&#xff09;两种情况。 [A]in g0/0/…
阅读更多...
STM32外设应用详解

STM32外设应用详解

STM32外设应用详解 STM32微控制器是意法半导体&#xff08;STMicroelectronics&#xff09;推出的一系列基于ARM Cortex-M内核的高性能、低功耗32位微控制器。它们拥有丰富的外设接口和功能模块&#xff0c;可以满足各种嵌入式应用需求。本文将详细介绍STM32的外设及其应用&am…
阅读更多...
神经网络的基本骨架——nn.Module（torch.nn里的Containers模块里的Module类）

神经网络的基本骨架——nn.Module（torch.nn里的Containers模块里的Module类）

**前置知识&#xff1a; nn&#xff1a;neural network神经网络 1、torch.nn&#xff1a;与神经网络有关的库 Containers&#xff1a;torch.nn中的一个模块 Module&#xff1a;所有神经网络模型的基础类&#xff08;Base class for all neural network modules&#xff09; …
阅读更多...
《Windows PE》5.2 遍历导出表

《Windows PE》5.2 遍历导出表

为了将程序读到内存指定位置&#xff0c;本节我们将讨论如何使用两种不同的方法遍历导出表。此外&#xff0c;我们还将给出一个打印进程调用kernel32中的API信息的示例程序。 本节必须掌握的知识点&#xff1a; 遍历导出表 打印kernel32 5.2.1 遍历导出表 ■方法一 实验三十四…
阅读更多...
【Vue.js】vue2 项目在 Vscode 中使用 Ctrl + 鼠标左键跳转 @ 别名导入的 js 文件和 .vue 文件

【Vue.js】vue2 项目在 Vscode 中使用 Ctrl + 鼠标左键跳转 @ 别名导入的 js 文件和 .vue 文件

js 文件跳转 需要安装插件 Vetur 然后需要我们在项目根目录下添加 jsconfig.json 配置&#xff0c;至于配置的作于&#xff0c;可以参考我的另外一篇博客&#xff1a; 【React 】react 创建项目配置 jsconfig.json 的作用 它主要用于配置 JavaScript 或 TypeScript 项目的根…
阅读更多...
C++ | Leetcode C++题解之第475题供暖器

C++ | Leetcode C++题解之第475题供暖器

题目&#xff1a; 题解&#xff1a; class Solution { public:int findRadius(vector<int>& houses, vector<int>& heaters) {sort(houses.begin(), houses.end());sort(heaters.begin(), heaters.end());int ans 0;for (int i 0, j 0; i < houses.…
阅读更多...
华为---MUX VLAN简介及示例配置

华为---MUX VLAN简介及示例配置

目录 1. 产生背景 2. 应用场景 3. 主要功能 4. 基本概念 5. 配置步骤及相关命令 6.示例配置 6.1 示例场景 6.2 网络拓扑图 6.3 配置代码 6.4 配置及解析 6.5 测试验证 配置注意事项 1. 产生背景 MUX VLAN&#xff08;Multiplex VLAN&#xff09;提供了一种通过VLA…
阅读更多...
python xml的读取和写入

python xml的读取和写入

import xml.etree.ElementTree as ET from xml.dom import minidom# 读取XML文档 tree ET.parse("./xml_3/z_20240827_001.xml") root tree.getroot() # 获取size元素 size_find_0 root.find("size") # 获取width子元素 size_w size_find_0.find("…
阅读更多...
最新文章

Copyright @ 2022~2023