详解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>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
uniapp动态修改元素节点样式详解
目录 一,通过style属性绑定来修改 html: 对应的js: 实现的效果: 二,利用ref来获取dom元素节点 代码: 实现的效果: 总结 一,通过style属性绑定来修改 第一步:肯定是需要获取元素节点 在uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效. 查看uniapp官网有一个uni.createSelectorQuery() API:可以通过这个属性获取标签的样式,在通过动态绑
-
详解uniapp的全局变量实现方式
前言 本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看 全局变量的实现方式 一般来说在uniapp中有以下几种方式 本地存储 配置文件 挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍 本地存储 永久存储,以app为例即使该应用被关闭,该数据依然会被存储 这是一种永久的存储方式,类似于web的Local Storage(有关于Cook
-
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方法
前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token 大概流程如下: 1.用户登录之后,后端会返回两个 token ,分别为accessToken 和refreshToken 存储到Storage 平时请求数据时,请求头使用accessToken 来发送接口 2.当返回401 token 过期后, 我们通过接口向后端获取新的 token ,请求参数为refreshToken 3.我们拿到新的accessToken 和refreshTok
-
详解Android App中创建ViewPager组件的方法
现在很多app一打开就是一个ViewPager,然后可以用手指滑,每滑一次就换一张图,底下还会有圈圈表示说现在滑到第几章~ 通常这些图片都是放功能简介或是使用教学之类的,我的需求很简单,就是上面提到的那样而已. 有两种做法,一种是找现有套件,查了一堆资料每个都跟我推荐ViewPagerIndicator这套,我之前也看过这套,只是看起来需要有fragment再加上google play范例好像载不到了,所以只好自己实做一个. Viewpager的实作可参考Android ViewPager使用详
-
详解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异步任务执行方式
基本概念 AsyncTask:异步任务,从字面上来说,就是在我们的UI主线程运行的时候,异步的完成一些操作.AsyncTask允许我们的执行一个异步的任务在后台.我们可以将耗时的操作放在异步任务当中来执行,并随时将任务执行的结果返回给我们的UI线程来更新我们的UI控件.通过AsyncTask我们可以轻松的解决多线程之间的通信问题. 怎么来理解AsyncTask呢?通俗一点来说,AsyncTask就相当于Android给我们提供了一个多线程编程的一个框架,其介于Thread和Handler之间,我
-
详解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播放音频文件的用法
要给工程中添加音频,首先要导入音频的框架 AVFoundation.framework 然后新建一个类继承于UIViewController, 我这里就叫FirstVC. 首先在 AppDelegate.m中初始化根视图 复制代码 代码如下: #import "AppDelegate.h" #import "FirstVC.h" @implementation AppDelegate - (void)dealloc { [_window release];
-
详解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中图片的线段涂鸦功能的添加方法
接下来我们要讲图片的涂鸦,我们分开一点一点拓展,先给图片上划线 创建项目 起名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
随机推荐
- asp.net 源码保存 用程序分页
- ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
- 详解python中的json的基本使用方法
- ASP 无限级分类实现
- JSP实现的简单分页显示效果代码
- 删除select中所有option选项jquery代码
- jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
- Linux Shell脚本实现检测tomcat
- jquery延迟加载外部js实现代码
- Node.js程序中的本地文件操作用法小结
- 常见的网上邻居访问问题精解
- .NET实现:将EXE设置开机自动启动
- Android使用ViewPager实现图片滑动预览效果
- PHP 一个比较完善的简单文件上传
- C#实现微信跳一跳小游戏的自动跳跃助手开发实战
- iOS实现转场动画的3种方法示例
- 在element-ui的el-tree组件中用render函数生成el-button的实例代码
- Java加密解密和数字签名完整代码示例
- 易语言使用如果真命令判断编辑框内容是否正确的代码
- vue element upload实现图片本地预览