注意事項
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/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!