详解uni-app中的样式

目录
  • uni-app中的样式
  • 总结

uni-app中的样式

  • sass插件需要在官网下载，按提示操作即可
  • rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
  • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
  • 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
  • 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
<template>
	<view>
		<view>
			样式学习
		</view>
		<view class="box1">
			测试文字
			<text>123</text>
		</view>
		<view class="iconfont icon-shipin">
		</view>
	</view>
</template>
<script>
</script>
<style lang="scss">
	@import url("./a.css");//导入了外部的css文件
	.box1{
		width: 350rpx; //rpx不仅可以给盒子使用还可以给文字使用
		height: 350rpx;
		background: red;
		font-size: 50rpx;
		color: #FFFFFF;
		text{
			color: pink;
		}
	}
</style>

在App.vue里面定义公共的全局样式

<style>
	/*每个页面公共css */
	//全局样式,会被局部样式覆盖掉
	@import url("./static/fonts/iconfont.css");
	.box1{
		background: pink;
	}
</style>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • uniapp动态修改元素节点样式详解

    uniapp动态修改元素节点样式详解

    目录 一,通过style属性绑定来修改 html: 对应的js: 实现的效果: 二,利用ref来获取dom元素节点 代码: 实现的效果: 总结 一,通过style属性绑定来修改 第一步:肯定是需要获取元素节点 在uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效. 查看uniapp官网有一个uni.createSelectorQuery() API:可以通过这个属性获取标签的样式,在通过动态绑

  • uniapp和vue的区别详解

    uniapp和vue的区别详解

    目录 1.简单的页面示例 2.uni-app支持vue组件和小程序原生组件混用 3.常用标签,常用组件包括view.text.swiper.scroll-view等. 4.生命周期 4.1应用生命周期,这app.vue里面 4.2页面生命周期,可以做每个页面中写. 4.3组件生命周期, 相当于vue的生命周期. 5.使用插件 总结 项目目录: ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb │─components 符合vue组件规范的

  • 详解uniapp无痛刷新token方法

    详解uniapp无痛刷新token方法

    前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token 大概流程如下: 1.用户登录之后,后端会返回两个 token ,分别为accessToken 和refreshToken 存储到Storage 平时请求数据时,请求头使用accessToken 来发送接口 2.当返回401 token 过期后, 我们通过接口向后端获取新的 token ,请求参数为refreshToken 3.我们拿到新的accessToken 和refreshTok

  • 详解uniapp的全局变量实现方式

    前言 本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看 全局变量的实现方式 一般来说在uniapp中有以下几种方式 本地存储 配置文件 挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍 本地存储 永久存储,以app为例即使该应用被关闭,该数据依然会被存储 这是一种永久的存储方式,类似于web的Local Storage(有关于Cook

  • 详解Android App中创建ViewPager组件的方法

    现在很多app一打开就是一个ViewPager,然后可以用手指滑,每滑一次就换一张图,底下还会有圈圈表示说现在滑到第几章~ 通常这些图片都是放功能简介或是使用教学之类的,我的需求很简单,就是上面提到的那样而已. 有两种做法,一种是找现有套件,查了一堆资料每个都跟我推荐ViewPagerIndicator这套,我之前也看过这套,只是看起来需要有fragment再加上google play范例好像载不到了,所以只好自己实做一个. Viewpager的实作可参考Android ViewPager使用详

  • 详解iOS App中UITableView的创建与内容刷新

    详解iOS App中UITableView的创建与内容刷新

    UITableView几乎是iOS开发中用处最广的一个控件,当然也是要记相当多东西的一个控件. 创建 首先创建一个新的项目,并添加一个MainViewController的Class文件 打开MainViewController.h文件 @interface MainViewController : UIViewController<UITableViewDataSource,UITableViewDelegate> @property (nonatomic, retain) NSArray

  • 详解Android App中使用VideoView来实现视频播放的方法

    通过VideoView播放视频的步骤: 1.在界面布局文件中定义VideoView组件,或在程序中创建VideoView组件 2.调用VideoView的如下两个方法来加载指定的视频 (1)setVidePath(String path):加载path文件代表的视频 (2)setVideoURI(Uri uri):加载uri所对应的视频 3.调用VideoView的start().stop().psuse()方法来控制视频的播放 VideoView通过与MediaController类结合使用,

  • 详解Android App中的AsyncTask异步任务执行方式

    详解Android App中的AsyncTask异步任务执行方式

    基本概念 AsyncTask:异步任务,从字面上来说,就是在我们的UI主线程运行的时候,异步的完成一些操作.AsyncTask允许我们的执行一个异步的任务在后台.我们可以将耗时的操作放在异步任务当中来执行,并随时将任务执行的结果返回给我们的UI线程来更新我们的UI控件.通过AsyncTask我们可以轻松的解决多线程之间的通信问题. 怎么来理解AsyncTask呢?通俗一点来说,AsyncTask就相当于Android给我们提供了一个多线程编程的一个框架,其介于Thread和Handler之间,我

  • 详解iOS App中UISwitch开关组件的基本创建及使用方法

    详解iOS App中UISwitch开关组件的基本创建及使用方法

    一.第一种创建UISwitch组件的方法,在代码中动态创建. 1.打开Xcode, 新建项目Switch,选择Single View Application. 2.打开ViewController.m文件在viewDidLoad方法里添加代码: 复制代码 代码如下: (void)viewDidLoad  {      [super viewDidLoad];      UISwitch *switchButton = [[UISwitch alloc] initWithFrame:CGRectM

  • 详解iOS App中调用AVAudioPlayer播放音频文件的用法

    详解iOS App中调用AVAudioPlayer播放音频文件的用法

    要给工程中添加音频,首先要导入音频的框架 AVFoundation.framework 然后新建一个类继承于UIViewController, 我这里就叫FirstVC. 首先在 AppDelegate.m中初始化根视图 复制代码 代码如下: #import "AppDelegate.h" #import "FirstVC.h" @implementation AppDelegate - (void)dealloc {     [_window release];

  • 详解iOS App中UiTabBarController组件的基本用法

    详解iOS App中UiTabBarController组件的基本用法

    UiTabBarController这个控制器绝对是项目架构时做常用的一个控件. 我们大致看下控件的效果,我们就知道为什么说他常见了. 这就是最简单的一个雏形,想必现在基本70%的应用界面结构都会是这样的. 在Android中我们以ActivityGroup或是现在的fragment来实现,一个容器中包含多个子控制器. 下面我们还是以建立xib文件的形式来实现一个这样的整体布局的例子. 当然在 xcode中我们会发现其实直接有这么一个模板了 但是直接使用模板后会发现是直接在代码里实现了子布局得添

  • 详解iOS App中UIPickerView滚动选择栏的添加方法

    1.UIPickerView的宽度和高度是固定的,纵向是320216,横向是568162 2.属性: 复制代码 代码如下: @property(nonatomic,readonly)NSInteger numberOfComponents; // 选择框的行数 @property(nonatomic,assign)idUIPickerViewDataSource> dataSource; (类似于UITableView) @property(nonatomic,assign)idUIPicker

  • 详解iOS App中图片的线段涂鸦功能的添加方法

    详解iOS App中图片的线段涂鸦功能的添加方法

    接下来我们要讲图片的涂鸦,我们分开一点一点拓展,先给图片上划线 创建项目 起名testAddLine 接下来我们在默认生成的ViewController中添加一张图片 待用 同时添加一个按钮 复制代码 代码如下: - (void)viewDidLoad {      [super viewDidLoad];      // Do any additional setup after loading the view, typically from a nib.            UIImag

  • 详解Android App中ViewPager使用PagerAdapter的方法

    PageAdapter是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. 要使用PagerAdapter, 首先要继承PagerAdapter类,至少覆盖以下方法: 在每次创建ViewPager或滑动过程中,以下四个方法都会被调用,而instantiateItem和destroyItem中的方法要自己去实现. public abstract int getCount(); 这个方法,是获取当前窗体界面数 public a

随机推荐