uniapp 踩坑

1. 獲取數據

   可在 onLoad 生命周期中獲取數據,接收一個參數 option 為上個頁面傳遞的參數.
   
   

2. 點擊事件tap代替click

   兩者都會在點擊時觸發，但是在web手機端，clikc會有300ms延時，所以要用tap代替click作為點擊事件，singleTap和doubleTap分別作為單次點擊和雙擊，但是使用tap會帶來點擊穿透。

   點擊穿透和延遲詳細:

   https://juejin.im/post/5b3cc9836fb9a04f9a5cb0e0

   
   

3. 沉浸式頭部

   

   在pages.json中page添加

   "style": {
       //這里僅支持十六進制
   	//#ffff0000 為十六進制透明色
   	"navigationBarBackgroundColor": "#ffff0000"
   }	
   

   背景顏色透明 文字不透明 也可用通過rgba第四個值 alpha值 范圍為0.0到1.0之間，0.5為半透明.

   
   

4. 自定義返回

   uni.navigateTo({url: ""}) 會導致返回頁面重新加載.

   uni.navigateBack({ delta: 1 }); 當前頁面刷新后無法返回.

   可以添加事件 如下:

   back() {   
       let canBack = true  
       const pages = getCurrentPages()  
       // 有可返回的頁面則直接返回，uni.navigateBack默認返回失敗之后會自動刷新頁面 ，無法繼續返回  
       if (pages.length > 1) {  
           uni.navigateBack(1)  
           return;  
       }  
       // vue router 可以返回uni.navigateBack失敗的頁面 但是會重新加載  
       let a = this.$router.go(-1)  
       router.go失敗之后則重定向到首頁  
       if (a == undefined) {  
           uni.reLaunch({  
               url: "/pages/tabbar/index"  
           })  
       }  
       return;  
   },
   

   
   

5. :style 不支持**`backgroundColor: ${cl}` 語法 改成 :style="{backgroundColor: cl}" 即可
   
   

6. 頭部導航欄差異

   

   可在pages.json中的pages中添加

   "style": {
       // 默認原生導航不顯示
       "h5": {
           "titleNView": false  
       },
           "enablePullDownRefresh": true  // 允許下來刷新
   }
   

   添加后:

   
   
   

7. 視圖容器scroll-view 滾條隱藏

       /deep/.uni-scroll-view::-webkit-scrollbar {
       /* 隱藏滾動條，但依舊具備可以滾動的功能 */
       display: none
       }
   

​