微信小程序标题栏加logo

一、场景

想要在自定义微信小程序自定义标题栏内容，也就是app.json中的“window”相同的内容。但是，在app.json文件中，个人没有发现其他的办法来设置这些内容。

app.json中“window”设置

  "window": {"backgroundTextStyle": "light",//下拉背景"navigationBarBackgroundColor": "#fff",//导航栏背景色"navigationBarTitleText": "九陌斋",//导航栏文字"navigationBarTextStyle": "black",//文字颜色"pageOrientation": "auto"//横屏竖屏跟随系统},

二、实现方案

本文记录的方案不是全局配置，即每一个page需要单独配置。同时，这里是基于iView-weapp的。需要配置使用IView-weapp，教程地址：。

另外，如果你知道怎么全局配置的话，欢迎指教！

效果图：

app.js加入一个全局数据：

globalData: {statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],}

在要修改的page的json里加上：
```
{"navigationStyle": "custom"
}
```

在对应page的js文件里加上：

const app = getApp()//新建的文件没有这个对象，要加上
Page({data: {statusBarHeight: app.globalData.statusBarHeight//在data里加上这句即可}}）

wxss加上相应内容：

/* 自定义导航栏 */
.custom{position: fixed;width: 100%;height: 50px;z-index: 999;background:white;text-align: center;
}
.titlelogo{float: left;
}//下面内容是IView的内容可根据实际情况进行调整
.demo-row{margin-bottom: 5px;background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
}
.demo-col{color:black;padding: 10px 0;text-align: center;/* background: rgba(0, 153, 229, .7); */
}
.demo-col.light{background: rgba(0, 153, 229, .5);
}
.demo-row.light .demo-col{background: rgba(0, 153, 229, .5);
}
.demo-row.light .demo-col.light{background: rgba(0, 153, 229, .3);
}.row-class{background: #fff;margin-bottom: 6px;
}
.col-class{height: 32px;line-height: 32px;color: #fff;text-align: center;/* background: #2d8cf0; */font-size: 12px;
}
.col-class.light{background: #5cadff;
}
/* 自定义导航栏 */

对应page的wxml内添加内容：

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px"><i-row><i-col span="1" i-class="col-class"></i-col><i-col span="7" i-class="col-class"><i-avatar class="titlelogo" src="/static/logo/logo6.png" size="large" shape="ciecle"></i-avatar></i-col><i-col span="8" i-class="demo-col">九陌斋</i-col><i-col span="8" i-class="col-class"></i-col>
</i-row>
</view>

其他的页面同样修改即可。

总结

作者并没有很系统的学习这些内容，对css内容不熟，最开始作者想直接将所有样式敲出来，但是发现很麻烦，而且并不能很好适配所有设备，所以改用了IView。当然，我相信不用它也能写的很好，我也非常欢迎你的指教。

微信小程序标题栏加logo–基于IView-weapp相关推荐

微信小程序标题栏放logo 搜索框
效果图如下: 如果做成这样,标题栏上面放置自己的logo,绝对逼格满满,话不多说看操作: 第一步:选择你想要放置logo的页面,例如,index页面,找到此页面的json子页面,放置代码: {&quo ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
[微信小程序毕业设计源码]基于小程序的健康管理（慢性疾病）系统
目录一.程序介绍: 三.文档目录: 四.运行截图: 五.数据库表: 六.代码展示: 七.更多学习目录: 八.互动留言一.程序介绍: 文档:开发技术文档.参考LW.答辩PPT,部分项目另有其他文档 ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...

微信小程序标题栏加logo–基于IView-weapp

目录

一、场景

二、实现方案

总结

微信小程序标题栏加logo–基于IView-weapp相关推荐

最新文章

热门文章