2020年uniapp笔记

1、跳转到上一个页面

 <i class="uni-btn-icon" @tap="navigateBack"></i>

methods: {  
     navigateBack(){      
    uni.navigateBack(1);   
},
}

2、头部导航栏背景透明

"style": {
        "navigationBarTitleText": "详情",
        "app-plus": {
            "titleNView": {
                "type": "transparent"
            }
        }
    }

3、设置自定义导航栏

参考文章：www.cnblogs.com/fundebug/p/…

在app.json文件里面的 window 增加 navigationStyle:custom ，顶部导航栏就会消失。这是针对于所有页面。

app.json

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "window": {
    "navigationStyle": "custom"
  } 
}

如果只是针对单独的一个页面，就在哪个页面的json文件里面设置。

单页面json:
{ 
"navigationStyle": "custom",  
"usingComponents":
    {"gbro-marquee": "/components/GBroMarquee/marquee" }, 
 "window": 
    {"navigationStyle": "default"}
}

 <view class="prohibition">    
<view class="demo" style="{{('height:'+demo.height+'px;'+'padding-top:'+demo.top+'px;padding-bottom:10rpx')}}">      
<view class="left" style="{{('top:'+demo.top+'px')}}">        
<view class="iconfont icon-xiaoxi"></view>      
</view>标题</view>  
</view>

单页面js 
 return {             
     demo: {top:34,  height: 0 },
}

CSS样式
.demo {  
    height: 50px !important;  
    position: relative;  
    display: -webkit-box;  
    display: -webkit-flex;  
    display: flex;  
    -webkit-box-align: center;  
    -webkit-align-items: center;  
    align-items: center;  
    -webkit-box-pack: center;  
    -webkit-justify-content: center;  
    justify-content: center;  
    background: #11c666;  
    font-size: 24rpx;  
    color: #fff;
}
.demo .left {  
    float: left;  
    position: absolute;  
    width: -webkit-max-content;  
    width: max-content;  
    height: -webkit-max-content;  
    height: max-content;  
    top: 0;  
    bottom: 0;  
    left: 20rpx; 
    margin: auto; 
}
.demo .left .iconfont {  
     color: #3c3c3c;
}

4、微信小程序

// pages/test/index.js
Page({   
/**    * 页面的初始数据    */  
 data: {   },   

/**    * 生命周期函数--监听页面加载    */   
onLoad: function (options) {   },   

/**    * 生命周期函数--监听页面初次渲染完成    */   
onReady: function () {   }, 
  
/**    * 生命周期函数--监听页面显示    */   
onShow: function () {   },   
    
/** * 生命周期函数--监听页面隐藏    */  
 onHide: function () {   },  

 /**    * 生命周期函数--监听页面卸载    */   
onUnload: function () {   },  
 
/**    * 页面相关事件处理函数--监听用户下拉动作    */   
onPullDownRefresh: function () {   },  

 /**    * 页面上拉触底事件的处理函数    */  
 onReachBottom: function () {   },  
 
/**    * 用户点击右上角分享    */   
onShareAppMessage: function () {   }
})

<navigator hover-class="none">

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA", 
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}