Posted by 注意事项
- 组件内引入图片要使用绝对路径。/static/…
- 主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted。
- 用tap事件代替click事件。
- 阻止事件冒泡时要在外层加一层标签<view @tap.stop=”stop”></view>，直接在需要使用的方法上加.stop无效。
- <picker>中最好写一个<view class=”style”>写样式，而不是在picker上加样式。
<scroll-view>中写position: fixed，在ios下会有兼容性问题。 - 出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=””。
- <swiper>一定要给高度才会生效，一般是动态获取里面的元素或列表高度再赋值给<swiper>。
nvue css注意事项
- 只有text标签可以设置字体大小，字体颜色
- 布局不能使用百分比
- 只能使用class选择器
- border不支持简写
- background不支持简写
- .nvue 页面的布局排列方向默认为竖排（column），如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。
- 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>)*/
- :nth-child() /*选择器，选择器选区父元素的第N个子元素，与类型无关*/
- :nth-child(odd) /*奇数*/
- :nth-child(even) /*偶数*/
- ::before /*创建一个伪元素，其将成为匹配选中的元素的第一个子元素*/
- border-radius:30upx; /*圆角半径*/
- text-indent:20px /*首行缩进*/
- letter-spacing:1px /*字间距*/
- vertical-align: middle; /*图片垂直居中*/
- z-index /*重叠元素的堆叠顺序*/
- transform: rotate(45deg); /*旋转元素45度(菱形)*/
- :active，/*元素被点击时变色，但颜色在点击后消失*/
- :focus， */元素被点击后变色，且颜色在点击后不消失*/
- background: linear-gradient(#74AADA, #94db98); /*渐变色*/
本文链接地址: uniapp 注意事项