首页 > 其他分享 >响应式单位rpx及搭配UI产品工具和@import导入css样式和scss变量与用法static目录以及pages.json页面路由globaStyle的属性和pages设置路径及窗口表现

响应式单位rpx及搭配UI产品工具和@import导入css样式和scss变量与用法static目录以及pages.json页面路由globaStyle的属性和pages设置路径及窗口表现

时间:2024-09-06 22:21:58浏览次数:13  
标签:里面 rpx 可以 pages static 设置 我们 页面

1.响应式单位rpx及搭配UI产品工具

1.对于rpx的认知和用法以及对于px的区别

我们可以去官网先了解一下我们的rpx用法和注意以及与px的区别。

链接:页面样式与布局 | uni-app官网 (dcloud.net.cn)

我平时使用的px是我们的屏幕像素的单位,我们在一个页面创建一个view组件,并且给其在style组件里面赋予css样式,让其宽高都在200px左右。

保存好了之后在页面中进行运行,来查看我们的结果。

切换到了另一个的展示效果的展示

产生真中差异的是因为我们的px是固定的,并不会随着我们的页面变化而发生变化。我们可以使用设置百分比来解决。

我们还有一个单位是与我们的%一样的效果 vw 效果是和我们的百分比一致的,可以自己去将我们的百分比改为vw尝试。

我们也可以设置为rpx来实现我们的控制我们的页面显示区域。

这个时候我们可以进行切换我们的显示模式。

不过如果是我们的iPad的话是会有区别的。

我们的rpx是默认满屏的宽度为750rpx,所以我们设置为355rpx可以看的我们的页面占比都差不多是一半的页面。

我们也可以对其的logo进行修改,来实现我们的效果。

2.ui的基本认知和作用

我们如果是在一些并不清楚的图片上进行一块区域的调用,这个时候我们不能轻松的得到我们需要的宽度或者高度时,我们将需要的区域进行截图放入ui这可以在我们的UI里面的得到我们的宽和高

链接:https://mastergo.com

我们也可以我们的设计稿进行宽度的改变,比如我们的宽度并不是750的话可以进行手动改变。

如果说你并不会使用的话或者很生疏可以进入我们的资源社区来进行练习。

可以自己按照别人提供的稿子来进行设置。

2.@import导入css样式和scss变量与用法static目录

1.static目录

我们在给我们的页面样式赋予值的时候,如果有多个页面的同一个组件可以需要赋予相同的样式的话可以使用我们的App.vue里面的style组件给我们需要的组件进行赋值。

这说明了我们的当前页面的设置是要大于我们App.vue里面设置的样式的。

如果你需要在设置一个通用且会有许多的css样式设置的话,在我们的App.vue里面就显得不合适了,这时候我们可以在我们的static目录里面进行设置。我们先去vue的官网里面了解一下我们的static目录。

链接:工程简介 | uni-app官网 (dcloud.net.cn)

我们根据这里面的提示来创建一个common 目录,在这个目录里面创建两个文件夹分别是css和scss。

2.@import导入

我们创建好css文件夹时在里面在创建一个css文件,写上我们的通用属性。

使用我们的@import导入我们的css文件

保存好了之后区域页面查看效果

3.scss变量

我们在左侧的目录最小方可以看的我们的scss文件,打开它会发现有着许多的样式,这个是已经设置好了的,可以在我们的页面直接使用。

可以看到我们的颜色已经是可以清晰的看的我们的文字已经改变颜色了。我们也可以去使用一些其他的变量,比如背景颜色、边框颜色、文字尺寸等。

如果说这里面没有你想要的格式可以自己创建变量。

如果在使用我们的变量发生了错误可以重启一下项目,因为这是预编译的在我们使用的时候并没有读取到,所以我们需要重启项目之后再次使用。

也可以在我们的自己创建的scss目录里面创建自己的变量,如果你是移动了你所使用的变量的话,需要重新启动项目,否则还是在使用你之前的那个变量的位置。

这个时候页面并不会报错,因为我们还是使用之前的变量位置,重启之后就会报错,我们需要在我们系统提供的scss文件里面导入我们的自己创建的scss文件。

完成这些之后重启项目即可。

3.pages.json页面路由globaStyle的属性

1.了解pages.json页面路由globaStyle的属性

我们可以在官网里面了解一下我们的页面配置和用法

链接:pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

我们在启动页面的时候可以看的我们的页面上方有一个区域上面是有我们这个页面的标签的,如果没有可以去我们的pages.json里面给我们进行添加。

我们如果想要对我们的导航进行改变也可以在我们的pages.json里面改变。

比如说改成#ccc也就是灰色,保存好了之后在我们的页面中查看效果,也可以在我们的微信小程序里面查看效果。

我们也可以修改我们的导航上面的文字颜色,使用我们的的navigationBarTextStyle 不过它仅支持白色white或者黑色black。

我们也可以对于我们的导航的文字进行修改,需要使用到我们的navigationBarTitleText属性

如果说你并没有修改成功的话是因为权限问题,在我们的页面里面也使用的navigationBarTitleText并且对其进行了赋值,我们可以直接删除这个属性即可看的我们修改的导航文字。

如果并不想要这个导航栏的话也可以去除,去除导航栏需要使用到"navigationStyle": "custom",

也可以设置下拉框刷新的颜色,设置下拉刷新的话需要手动开启一个属性enablePullDownRefresh这个才能开启我们的下拉刷新。

使用backgroundTextStyle可以改变我们的下拉刷新的样式。

在使用程序的时候经常会出现到底触发,如果需要实现这个功能可以使用onReachBottom来实现。

当然也可以提前触发这个触底函数onReachBottomDistance默认值为50

4.pages设置路径及窗口表现

1.pages设置路径及窗口表现及其用法

我们在pages.json文件里面可以看的我们的有多少个页面就会有多少个pages,每一个pages都包含了两个属性,一个是path路劲,另一个是style是窗口表现。

可以在官网里面先了解一下我们的pages的知识

链接:pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

我们可以对单独的一个页面的导航进行颜色改变,使用style里面的navigationBarBackgroundColor

导航的字体颜色也是一样可以自己设置的使用:navigationBarTextStyle  即可完成。

如果你想要一开始就执行的页面是当前页面的话,可以改变我们当前页面在pages文件里面的位置

使用navigationBarTitleText可以设置导航的标题。

如果设置了全页面下拉刷新,但是又有几个页面不应该给其下拉刷新的话,可以设置

enablePullDownRefresh并且给其值赋予“false”即可

如果只想个别的页面下拉刷新,则反过来就可以了改变值为true

我们可以使用"navigationStyle": "custom"来设置某个页面或者全部页面没有导航条。

标签:里面,rpx,可以,pages,static,设置,我们,页面
From: https://blog.csdn.net/dengshuweng/article/details/141939556

相关文章

  • css中的响应式单位rpx,vue3中@import的导入
    尺寸单位,px和rpx对比px单位像素是图像的基本采样单位,它不是一个确定的物理量,不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素rpx单位可以根据屏幕宽度进行自适应。rpx其实是微信对于rem的一种应用的规定,或者说一种设计的方案,官方上规定屏幕......
  • 【Moveit2】MoveGroupInterface设置目标姿态,然后创建一个计划到该姿态的运动路径,stati
    PlanandExecuteusingMoveGroupInterface//CreatetheMoveItMoveGroupInterfaceusingmoveit::planning_interface::MoveGroupInterface;automove_group_interface=MoveGroupInterface(node,"panda_arm");//SetatargetPoseautoconsttarget_p......
  • 微信小程序 - 云开发报错 errCode: -1 | errMsg: query.update is only available in
    前言关于此问题网上的教程都无法解决,如果您的报错信息与我相似,即可解决。在微信小程序开发中,云开发使用云函数update操作数据库时出现报错:thirdScriptErrorerrCode:-1|errMsg:query.updateisonlyavailableinserverSDK/API;at“pages/x”pagelifeCycleMe......
  • static 数据 编程中的作用
      编程的开发语言有静态强类型语言和动态弱类型语言。静态强类型语言有C/C++,JAVA。静态的开发语言是编译型的开发语言。计算机的编程开发由程序设计师编写代码,源代码文件通过不同语言的编译器编译后会生成不同的机器执行文件。解释性语言为动态弱类型语言,编译型语言是静态强......
  • C++(static_cast)
    目录1.语法2.示例3.为什么选择static_cast总结static_cast是C++中的一种类型转换运算符,用于在不同的数据类型之间进行安全转换。与C风格的强制类型转换不同,static_cast更加安全和明确。它主要用于进行类型转换时,确保转换是合法的,并且不会引入不必要的风险。1.语法......
  • 【Java 基础】类和对象(构造&this&封装&static&代码块)
    ✨                           风起于青萍之末,浪成于微澜之间    ......
  • 【Java学习】静态static&继承
    一、静态static(一)定义static是静态的意思,static可以修饰成员变量或者修饰方法。static关键字的使用,它可以用来修饰的成员变量和成员方法,被static修饰的成员是属于类的,放在静态区中,没有static修饰的成员变量和方法则是属于对象的。static关键字在Java开发非常的重要,对于理......
  • vue3中常见单位及响应式单位rpx
    1.常用单位1.1px此时画了一个盒子模型,宽度和高度都是200px此时效果就是这样的1.2vw现在更改成了40vw,看看效果是怎么样的vw也就是在整个页面中的占比量,40vw就是占整个页面的40%使用%这个也是同样的效果,都是在页面中的占比量最直观的区别就是切换页面大小,就可以......
  • C++学习——类当中static关键字的作用
    一、类和对象我们知道类是“行为”和“属性”的集合,我们可以通过类来实例化对象,从而定义对象的“行为”和“属性”。比如:classCar{ Stringbrand; Stringlicense; Stringcolor;}CarToyota;这里定义了“Car”的类,通过“Car”这个类实例化了“Toyota”。那么类当中的......
  • 利用Hexo和Github Pages搭建自己的博客(1)
    前言本文章会同步发表到博主自己的博客,所以如果在博主自己的博客里发现这个文章,请不要惊讶1.准备工具一台Windows7以上的电脑Node.js(建议lts版本)GitHexo一个Github账号和邮箱代码编辑器(强烈建议vscode)一个名字为:username(这里为你的GitHub名称).github.io的仓库2.安装No......