uni-app开发注意事项及经常使用样式

时间 2020-05-17

标签 uni app 开发注意事项经常使用样式繁體版

原文原文链接

注意事项

https://uniapp.dcloud.io/frame?id=template-block
官方推荐：
v-if写在<template/>标签中，v-for写在<block/>标签中
它们仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性css

https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8
阻止冒泡事件：.stop
例如：@tap.stophtml

methods中调用方法

this.$options.methods.test();

监听subNVue子页面的show和hide方法

在onload方法中添加vue

uni.getCurrentSubNVue().addEventListener("show", function() {
console.log("subNVue子窗体已显示！")
});
uni.getCurrentSubNVue().addEventListener("hide", function() {
console.log("subNVue子窗体已隐藏！")
});

父组件调用子组件中的方法

http://www.javashuo.com/article/p-otzjpnym-hb.htmljson

首先，引入子组件文件，而后用ref给子组件一个id标识，weex

而后经过this.$refs.mainindex.childMethod();调用子组件方法app

nvue窗体css样式注意事项

https://ask.dcloud.net.cn/article/36074
一、只有text标签能够设置字体大小，字体颜色
二、布局不能使用百分比
三、只能使用class选择器
四、border不支持简写
五、background不支持简写
六、.nvue 页面的布局排列方向默认为竖排（column），如需改变布局方向，能够在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。
七、nvue的uni-app编译模式下，App.vue 中的样式，会编译到每一个 nvue文件ide

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>)

//https://www.cnblogs.com/liangdecha/p/9566407.html
:nth-child()选择器，选择器选区父元素的第N个子元素，与类型无关
:nth-child(odd)奇数
:nth-child(even)偶数

//https://developer.mozilla.org/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度(菱形)

//https://www.cnblogs.com/skura23/p/6505352.html
:active，元素被点击时变色，但颜色在点击后消失
:focus， 元素被点击后变色，且颜色在点击后不消失

//https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
background: linear-gradient(#74AADA, #94db98); //渐变色

End！