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！