微信小程序自定义状态栏（右侧的胶囊是去不掉的哦）

微信小程序自定义状态栏（一）

home.json

{

 "navigationBarTitleText": "",

  "navigationStyle": "custom",

  "enablePullDownRefresh": true

}

home.wxml

   

    我的博客

    

    

        

        

    

    

    

        

            

                

            

            

                

            

            

                

            

        

    

home.wxss

page{

    background-color: #f2f2f2;

    padding: 26rpx auto;

}

/* 背景图片 */

.bgImg{

    width:100%;

    height:430rpx;    

    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAOCAIAAAD/pA42AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNWE4YmI2MC1mYmQ0LTdlNGYtYmIxZC1kYzMwMzZiYjBiMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkU1M0JCNjFEM0QxMTFFQUI2NDRDMzdDRTZBMTJEMDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkU1M0JCNjBEM0QxMTFFQUI2NDRDMzdDRTZBMTJEMDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YTVhOGJiNjAtZmJkNC03ZTRmLWJiMWQtZGMzMDM2YmIwYjMzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmE1YThiYjYwLWZiZDQtN2U0Zi1iYjFkLWRjMzAzNmJiMGIzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobWzGgAAAGeSURBVHja7NxhcoMgEIZhvkxv17P1yGWrYWJBRRDMjJr3+dFxHFRcFlzbpPr+8a6DTVuSO4JFp1ySW7+Kdxb1JDlgPMb/b88bHMpCQDqvohBOxTGx18/6M5hL7/q5Sxbtf6hhnLdH2+I4pKMw72FDwliUHSpnXfNwqHDasR8+BFnbo9ibb+tZvbhOzSWmoSkGP0R5ORM1HqZsM610YxnJofUQOpMt7mHY8xvyMtM9H89h64vG7vallubSSbdxkqYcsEyEsznzDOS+ia3q7lTEzRejkQ2y5pM916bugWKqDV3PsrAdYb+1VqxMs/qssL15peOfgNY2+w715XBZKlYcOMOodJ/sKsMa1nqrLrlLsVKa2iK5AFDK3I2l6z11zOmG51WJTC9k934a7yhiqt7yLH7jpJABkPMgBAAAgFIGABoosw0AlDIRY4UEAIBSBgDejNcOAJQywHm8+5PY+rS7ptABQCkD4EQoTQAcgC9jA7hEEUPdA2Adv5UBcJyuvy5RrACglAFwC+IfPgKglLnn+k4IAACglAEAALfxJ8AAs2JjFofrLd8AAAAASUVORK5CYII=");

    z-index: -1;     

}

/*我的博客*/

.titletop{

    width:168rpx;

    height: 88rpx;

    font-size: 40rpx;

    font-weight: bold;

    color:#FFFFFF;

    position: absolute;

    top:60rpx;

    left:45rpx;

}

/* 搜索框 */

.search-bar {

  width:100%; 

  height: 80rpx; 

  padding-top: 150rpx;

  box-sizing: border-box;

  display: flex;

  align-items: center;/*垂直居中*/

  justify-content: center;/*水平居中*/

  

}

.search-input{

  border:none;/*边框*/

  border-radius:30rpx;

  background-color:#E2F7FB;

  width: 680rpx;

  height: 30px;

  font-size: 28rpx;

  margin-top: 70rpx;

  line-height: 60rpx;/*文字居中*/

  padding-left: 30rpx;/*左空格*/

  padding-right: 36rpx;/*右空格*/

  box-sizing: border-box;

  z-index: 999;

}

.search-bar image{

    width: 30rpx;

    height: 30rpx;

    position: absolute;

    top:170rpx;

    right:76rpx;

    z-index: 1000;

}

/**index.wxss**/

/* 轮播图 */

.lunbo{

    width: 700rpx;

    height: 270rpx;

    margin:100rpx auto;

}

.lunbo image{

    width: 100%;

    height: 100%;

    border-radius: 10rpx;

}

最后页面效果