vue引入公共css文件

html-css015

vue引入公共css文件,第1张

如图是一个常见的vue文件结构

在app.html 或者*.vue中引入css,如下所示:

在 app.html引入css对阵个页面都生效,在vue文件中引入,只对改vue生成的页面有效

uni-app支持的通用css单位包括px,rpx

vue页面支持普通H5单位,但在nvue里不支持;

nvue页面还不支持百分比单位

App端,在pages.json里的titleNView或页面里写的plus api中涉及的单位,只支持px,此时不支持rpx。

nvue中,uni-app模式可以使用px,rpx表现与vue中一致,weex模式目前遵循weex的单位;

点击切换实现路由跳转

实现方法: 一、在index.vue的页面入口写一个点击方法,利用uni.navigateTo({})写上将要跳转的页面路径。

                二、 components文件里面创建headerNav.vue组件

                三、在pages.json文件里写上组件路径进去

这里可以选择修改对应的样式信息

scroll-view属性说明:

横向滚动通过添加scroll-x="true",并且需要在scroll-view的上一级加上row,完成横向滚动

纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴

属性说明:

view的属性说明:

属性说明:

由于 icon 组件各端表现存在差异,可以通过使用字体图标的方式来弥补各端差异。

属性说明:

各平台type值的有效说明:

1.数组方法,元素为css的名称,可以在里面使用三目运算

<div :class="[ isOne?'one':'', 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示

<div :class="{'one':isOne,'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称

<div :class="isOne?'one':'two'" >直接加入</div>

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制

<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值

<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以

<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>