IT廉连看——Uniapp——页面样式与布局

IT廉连看------Uniapp------页面样式与布局

目标:

了解样式与布局的规范

熟记px和rpx的区别

全局样式与index样式的区别

一、查看uniapp框架简介------尺寸单位

px尺寸单位的使用是贯穿始终的。

[IT廉连看]

二、尺寸单位------实操效果

1、打开Hbuilder X并进入index.vue页面

2、删除初始化代码

3、删除date中保存的数据

4、删除样式

5、删除后运行至微信开发者工具查看效果

是一个空白的效果,后边我们就可以自己添加东西啦!

6、添加一些组件,添加一些效果

6.1添加view组件,API:view+回车
添加后效果:
接下来一起添加一些样式:

200px,微信开发者工具查看效果

200rpx,微信开发者工具查看效果,发现效果不一样

为什么会有这样的问题?

知道的同学奖励一根烤肠。

咱们把像素调整成屏幕的一半来看一看,750/2

[IT廉连看]

三、样式导入简介------实操效果

样式导入:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

html 复制代码
<style>
    @import "../../common/uni.css";
​
    .uni-card {
        box-shadow: none;
    }
</style>
复制代码

内联样式:框架组件上支持使用 style、class 属性来控制组件的样式。

  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

    html 复制代码
    <view :style="{color:color}" />

    class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

    html 复制代码
    <view class="normal_view" />

    选择器

    目前支持的选择器有:

    选择器 样例 样例描述
    .class .intro 选择所有拥有 class="intro" 的组件
    #id #firstname 选择拥有 id="firstname" 的组件
    element view 选择所有 view 组件
    element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
    ::after view::after 在 view 组件后边插入内容,仅 vue 页面生效
    ::before view::before 在 view 组件前边插入内容,仅 vue 页面生效

    注意:

    • uni-app 中不能使用 * 选择器。

    • 微信小程序自定义组件中仅支持 class 选择器

    • page 相当于 body 节点,例如:

      html 复制代码
      <!-- 设置页面背景颜色,使用 scoped 会导致失效 -- >
        page {
          background-color: #ccc;
      }
进入全局样式的编写
注:在这里编写的样式,在各个页面都可以使用。
添加全局使用的样式:如背景颜色、全局使用的字体大小
随后回到index.vue文件中给它起一个class名,title。

小提问:

如果我们也在index中写了一个title,那么它会优先使用哪个样式呢?那么它们的区别在哪里?

[IT廉连看]

扫盲:

这里是用来写自定义组件的地方。

html 复制代码
<template>
    <view>
        这是一个自定义组件
    </view>
</template>
 
<script>
</script>
 
<style>
</style>

小结:

px和rpx的区别

全局样式与index样式的区别

[IT廉连看​]

相关推荐
张三风啊23 分钟前
vue config 接口地址配置
前端·javascript·vue.js
多情码农无情键26 分钟前
浏览器漫谈HTML--2.2从表单标签看vue的响应式系统 理论+实战
前端·javascript·html
Uluoyu28 分钟前
Vue.Draggable使用nested-with-vmodel进行拖拽
前端·javascript·vue.js
北极糊的狐31 分钟前
vue页面成绩案例(for渲染表格/删除/添加/统计总分/平均分/不及格显红色/输入内容去首尾空格trim/输入内容转数字number)
前端·javascript·vue.js
边洛洛1 小时前
路由传参、搜索、多选框勾选、新增/编辑表单复用
前端·javascript·vue.js
OEC小胖胖3 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
秋田君4 小时前
uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战
javascript·uni-app
小闫BI设源码4 小时前
uniapp使用腾讯云获取位置转为省市区
uni-app·云计算·腾讯云
川石教育4 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
新时代的弩力5 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js