uni-app開發注意事項及常用樣式


注意事項

https://uniapp.dcloud.io/frame?id=template-block
官方推薦:
v-if寫在<template/>標簽中,v-for寫在<block/>標簽中
它們僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性

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

methods中調用方法

this.$options.methods.test();

監聽subNVue子頁面的show和hide方法

在onload方法中添加

uni.getCurrentSubNVue().addEventListener("show", function() {
console.log("subNVue子窗體已顯示!")
});
uni.getCurrentSubNVue().addEventListener("hide", function() {
console.log("subNVue子窗體已隱藏!")
});

父組件調用子組件中的方法

https://www.cnblogs.com/wangxiaoling/p/10250903.html

首先,引入子組件文件,然后用ref給子組件一個id標識,

然后通過this.$refs.mainindex.childMethod();調用子組件方法

nvue窗體css樣式注意事項

https://ask.dcloud.net.cn/article/36074
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文件

nvue與vue頁面開發的常見區別

https://uniapp.dcloud.io/use-weex?id=nvue%e5%bc%80%e5%8f%91%e4%b8%8evue%e5%bc%80%e5%8f%91%e7%9a%84%e5%b8%b8%e8%a7%81%e5%8c%ba%e5%88%ab

自定義導航欄注意事項

https://uniapp.dcloud.io/collocation/pages?id=customnav

flex布局

https://www.jianshu.com/p/4d596708f61b
https://www.cnblogs.com/dreamperson/p/9367008.html

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!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM