123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278 |
- Component({
- options: {
- multipleSlots: true,
- addGlobalClass: true,
- },
- properties: {
- extClass: {
- type: String,
- value: "",
- },
- background: {
- type: String,
- value: "rgba(255, 255, 255, 1)",
- observer: "_showChange",
- },
- backgroundColorTop: {
- type: String,
- value: "rgba(255, 255, 255, 1)",
- observer: "_showChangeBackgroundColorTop",
- },
- leftBtnBgColor: {
- type: String,
- value: "rgba(255, 255, 255, 0)",
- },
- color: {
- type: String,
- value: "rgba(0, 0, 0, 1)",
- },
- title: {
- type: String,
- value: "",
- },
- searchText: {
- type: String,
- value: "点我搜索",
- },
- searchBar: {
- type: Boolean,
- value: false,
- },
- stopBack: {
- type: Boolean,
- value: false,
- },
- back: {
- type: Boolean,
- value: true,
- },
- stopHome: {
- type: Boolean,
- value: false,
- },
- home: {
- type: Boolean,
- value: true,
- },
- iconTheme: {
- type: String,
- value: "black",
- },
- /* animated: {
- type: Boolean,
- value: true
- },
- show: {
- type: Boolean,
- value: true,
- observer: '_showChange'
- }, */
- delta: {
- type: Number,
- value: 1,
- },
- },
- created: function () {
- this.getSystemInfo();
- },
- attached: function () {
- this.setStyle(); //设置样式
- this.isSharePage();
- },
- lifetimes: {
- attached: function () {
- // 在组件实例进入页面节点树时执行
- this.setStyle(); //设置样式
- this.isSharePage();
- },
- },
- data: {},
- pageLifetimes: {
- show: function () {
- if (getApp().globalSystemInfo.ios) {
- this.getSystemInfo();
- this.setStyle(); //设置样式1
- }
- },
- hide: function () {},
- },
- methods: {
- isSharePage: function () {
- // 在内存中的所有页面栈对象
- const pages = getCurrentPages();
- if (pages.length == 1 && this.data.back) {
- this.setData({
- back: false,
- home: true,
- });
- }
- },
- setStyle: function (life) {
- const {
- statusBarHeight,
- navBarHeight,
- capsulePosition,
- navBarExtendHeight,
- ios,
- windowWidth,
- } = getApp().globalSystemInfo;
- const { back, home, title } = this.data;
- let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
- let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距
- let navigationbarinnerStyle = [
- `color: ${this.data.color}`,
- `background: ${this.data.background}`,
- `height:${navBarHeight + navBarExtendHeight}px`,
- `padding-top:${statusBarHeight}px`,
- `padding-right:${leftWidth}px`,
- `padding-bottom:${navBarExtendHeight}px`,
- ].join(";");
- let navBarLeft = [];
- if ((back && !home) || (!back && home)) {
- navBarLeft = [
- `width:${capsulePosition.width}px`,
- `height:${capsulePosition.height}px`,
- `margin-left:${rightDistance}px`,
- ].join(";");
- } else if ((back && home) || title) {
- navBarLeft = [
- `width:${capsulePosition.width}px`,
- `height:${capsulePosition.height}px`,
- `margin-left:${rightDistance}px`,
- ].join(";");
- } else {
- navBarLeft = [`width:auto`, `margin-left:0px`].join(";");
- }
- if (life === "created") {
- this.data = {
- navigationbarinnerStyle,
- navBarLeft,
- navBarHeight,
- capsulePosition,
- navBarExtendHeight,
- ios,
- };
- } else {
- this.setData({
- navigationbarinnerStyle,
- navBarLeft,
- navBarHeight,
- capsulePosition,
- navBarExtendHeight,
- ios,
- });
- }
- },
- _showChange: function (value) {
- this.setStyle();
- },
- // 返回事件
- back: function () {
- if (this.properties.stopBack) {
- this.triggerEvent("back", {
- delta: this.data.delta,
- });
- } else {
- wx.navigateBack(this.data.delta);
- }
- },
- home: function () {
- if (this.properties.stopHome) {
- this.triggerEvent("home", {});
- } else {
- wx.switchTab({ url: "/pages/index/index" });
- }
- },
- search: function () {
- this.triggerEvent("search", {});
- },
- getSystemInfo() {
- var app = getApp();
- if (app.globalSystemInfo && !app.globalSystemInfo.ios) {
- return app.globalSystemInfo;
- } else {
- let systemInfo = wx.getSystemInfoSync();
- let ios = !!(systemInfo.system.toLowerCase().search("ios") + 1);
- let rect;
- try {
- rect = wx.getMenuButtonBoundingClientRect
- ? wx.getMenuButtonBoundingClientRect()
- : null;
- if (rect === null) {
- throw "getMenuButtonBoundingClientRect error";
- }
- //取值为0的情况 有可能width不为0 top为0的情况
- if (!rect.width || !rect.top || !rect.left || !rect.height) {
- throw "getMenuButtonBoundingClientRect error";
- }
- } catch (error) {
- let gap = ""; //胶囊按钮上下间距 使导航内容居中
- let width = 96; //胶囊的宽度
- if (systemInfo.platform === "android") {
- gap = 8;
- width = 96;
- } else if (systemInfo.platform === "devtools") {
- if (ios) {
- gap = 5.5; //开发工具中ios手机
- } else {
- gap = 7.5; //开发工具中android和其他手机
- }
- } else {
- gap = 4;
- width = 88;
- }
- if (!systemInfo.statusBarHeight) {
- //开启wifi的情况下修复statusBarHeight值获取不到
- systemInfo.statusBarHeight =
- systemInfo.screenHeight - systemInfo.windowHeight - 20;
- }
- rect = {
- //获取不到胶囊信息就自定义重置一个
- bottom: systemInfo.statusBarHeight + gap + 32,
- height: 32,
- left: systemInfo.windowWidth - width - 10,
- right: systemInfo.windowWidth - 10,
- top: systemInfo.statusBarHeight + gap,
- width: width,
- };
- // console.log("error", error);
- // console.log("rect", rect);
- }
- let navBarHeight = "";
- if (!systemInfo.statusBarHeight) {
- systemInfo.statusBarHeight =
- systemInfo.screenHeight - systemInfo.windowHeight - 20;
- navBarHeight = (function () {
- let gap = rect.top - systemInfo.statusBarHeight;
- return 2 * gap + rect.height;
- })();
- systemInfo.statusBarHeight = 0;
- systemInfo.navBarExtendHeight = 0; //下方扩展4像素高度 防止下方边距太小
- } else {
- navBarHeight = (function () {
- let gap = rect.top - systemInfo.statusBarHeight;
- return systemInfo.statusBarHeight + 2 * gap + rect.height;
- })();
- if (ios) {
- systemInfo.navBarExtendHeight = 4; //下方扩展4像素高度 防止下方边距太小
- } else {
- systemInfo.navBarExtendHeight = 0;
- }
- }
- systemInfo.navBarHeight = navBarHeight; //导航栏高度不包括statusBarHeight
- systemInfo.capsulePosition = rect; //右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
- systemInfo.ios = ios; //是否ios
- app.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了
- //console.log('systemInfo', systemInfo);
- return systemInfo;
- }
- },
- },
- });
|