uni-app避坑

1. 使用navigationStyle自定义导航栏

在page.json文件中添加"navigationStyle": "custom"就可以了

2. globalStyle全局外观配置

 3. rgba（0.3，0.3，0.3，0.3）

4. 单边阴影效果

    .top {  
      box-shadow: 0 -2px 0 red;  
    }  
    .right {  
      box-shadow: 2px 0 0 green;  
    }  
    .bottom {  
      box-shadow: 0 2px 0 blue;  
    }  
    .left {  
      box-shadow: -2px 0 0 orange;  
    }  

5. flex布局九宫格效果

.box{
   	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.item{
    width:30%;
}

6. css做线性渐变

background-image: linear-gradient(to right, red , yellow);

7. 使用uni.$emit()和uni.$on() 进行页面间通讯

监听事件

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
},

触发事件

// 登陆页面  
uni.$emit('login', {  
       avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
       token: 'user123456',  
       userName: 'unier',  
       login: true  
});

一次性的事件，直接使用 uni.$once 监听，不需要移除。