uni-app开发注意事项及常⽤样式
官⽅推荐:
v-if写在<template/>标签中,v-for写在<block/>标签中
它们仅仅是⼀个包装元素,不会在页⾯中做任何渲染,只接受控制属性
阻⽌冒泡事件:.stop
例如:@tap.stop
this.$st();
flex布局对齐方式在onload⽅法中添加
console.log("subNVue⼦窗体已显⽰!")
});
console.log("subNVue⼦窗体已隐藏!")
});
⾸先,引⼊⼦组件⽂件,然后⽤ref给⼦组件⼀个id标识,
然后通过this.$refs.mainindex.childMethod();调⽤⼦组件⽅法
1、只有text标签可以设置字体⼤⼩,字体颜⾊
2、布局不能使⽤百分⽐
3、只能使⽤class选择器
4、border不⽀持简写
5、background不⽀持简写
6、.nvue 页⾯的布局排列⽅向默认为竖排(column),如需改变布局⽅向,可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改,仅在 uni-app 模式下⽣效。
7、nvue的uni-app编译模式下,App.vue 中的样式,会编译到每个 nvue⽂件
display: flex; //将对象作为弹性伸缩盒显⽰
display: inline-flex; //将对象作为内联块级弹性伸缩盒显⽰⽗元素默认根据⼦元素宽⾼⾃适应
//主轴⽅向
flex-direction: row; //项⽬排列⽅向为⽔平⽅向,从左端开始
flex-direction: column; //主轴为垂直⽅向,起点在右端
//如何换⾏
flex-wrap: nowrap; //项⽬不换⾏排列
flex-wrap: wrap; //换⾏排列,第⼀⾏在上⽅
flex-wrap: reverse; //换⾏排列,第⼀⾏在下⽅
//主轴对齐⽅式
justify-content: flex-start //左对齐
justify-content: flex-end //右对齐
justify-content: center //居中
justify-content: space-between //两端对齐,项⽬之间间隔相等
justify-content: space-around //每个项⽬两侧间隔相等
//项⽬在交叉轴上对齐⽅式
align-items: center; //垂直居中
align-items: flex-start; //交叉轴起点对齐
align-items: flex-end; //交叉轴终点对齐
//多跟轴线的对齐⽅式
align-content: center; //垂直居中
align-content: flex-start; //交叉轴起点对齐
align-content: flex-end; //交叉轴终点对齐
position:sticky //粘性定位(基于⽤户的滚动位置来定位,使⽤时需指定特定阈值,如top:0) position:static //默认定位(没有定位)
position:fixed //固定定位(固定在窗⼝位置,窗⼝滚动也不会移动)
position:relative top:10px //相对定位(相对其正常位置定位)
position:absolute //绝对定位(相对于最近的已定位⽗元素,如果没有已定位⽗元素,则相对于<html>) //wwwblogs/liangdecha/p/9566407.html
:nth-child()选择器,选择器选区⽗元素的第N个⼦元素,与类型⽆关
:nth-child(odd)奇数
:nth-child(even)偶数
///zh-CN/docs/Web/CSS/::before
::before创建⼀个伪元素,其将成为匹配选中的元素的第⼀个⼦元素
border-radius:30upx; //圆⾓半径
text-indent:20px //⾸⾏缩进
letter-spacing:1px //字间距
vertical-align: middle; //图⽚垂直居中
z-index //重叠元素的堆叠顺序
transform: rotate(45deg); //旋转元素45度(菱形)
//wwwblogs/skura23/p/6505352.html
:active,元素被点击时变⾊,但颜⾊在点击后消失
:focus,元素被点击后变⾊,且颜⾊在点击后不消失
///zh-CN/docs/Web/CSS/linear-gradient
background: linear-gradient(#74AADA, #94db98); //渐变⾊
End!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论