企业官网建设流程全解析

无锡易时代网站建设有限公司怎么样,免费的写作网站,构建企业网站,现在由哪些网站可以做外链小程序布局三部分#xff0c;头内容底部#xff0c;自定义头(navigation-bar)内容自定义底部(tab-bar)#xff0c;使中间的内容适应不同的机型第一种#xff1a;通过js控制高度app.jsgetShowScreenHeight() {try {// 获取系统信息#xff08;同步方式#xff0c;兼容性更…小程序布局三部分头内容底部自定义头(navigation-bar)内容自定义底部(tab-bar)使中间的内容适应不同的机型第一种通过js控制高度app.jsgetShowScreenHeight() { try { // 获取系统信息同步方式兼容性更好 const systemInfo wx.getWindowInfo(); // 获取胶囊按钮位置同步 const capsuleInfo wx.getMenuButtonBoundingClientRect(); // 计算导航栏高度状态栏高度 胶囊按钮高度 上下间距 const statusBarHeight systemInfo.statusBarHeight; const navHeight statusBarHeight capsuleInfo.height (capsuleInfo.top - statusBarHeight) * 2; // 兼容处理获取安全区域底部基础库2.11.0时使用bottom属性 const safeAreaBottom systemInfo.safeArea?.bottom || systemInfo.bottom; const tabHeight systemInfo.screenHeight - safeAreaBottom; // 计算内容区域高度屏幕高度 - 导航栏高度 - TabBar高度 const screenHeight systemInfo.screenHeight - navHeight - tabHeight; // 保存到全局数据 this.globalData.navHeight navHeight; this.globalData.tabHeight tabHeight; this.globalData.screenHeight screenHeight; } catch (e) { // 备用方案当API不可用时 this.globalData.screenHeight 600; // 默认高度 } }wxmlnavigation-bar navTitle{{navTitle}} iconType{{iconType}}/navigation-bar scroll-view scroll-y styleheight: {{height}}px; /scroll-view tab-bar selected{{selected}}/tab-barjsdata: { navTitle:正式考场, selected:2,//在tabbar列表中的序号 iconType:home, height:getApp().globalData.screenHeight-10, },上述的getApp().globalData.screenHeight-10减10是测试过程中进行的优化第二种通过css控制wxmlview classpage-content navigation-bar navTitle{{navTitle}} iconType{{iconType}}/navigation-bar view classcontent /view tab-bar selected{{selected}}/tab-bar /viewwxss.page-content{ display: flex; flex-direction: column; height: 100vh; /*页面占满全屏*/ } .content{ flex: 1; /*余下内容填充*/ width: 100%; display: flex; flex-direction: column; background-color: #ffffff; } .bottom{/*如有底部内容希望始终保持在tab-bar上方*/ position:flex; padding-bottom: calc(env(safe-area-inset-bottom) 110rpx); }关于flex:1 的基本含义当弹性容器display: flex 或 display: inline-flex的子元素设置 flex: 1 时该元素的行为如下‌初始尺寸为 0‌由于 flex-basis 被设置为 0%元素的初始宽度或高度取决于主轴方向被视为 0不占用任何空间。‌34‌按比例分配剩余空间‌如果父容器有剩余空间flex-grow: 1 会使得该元素与其他同样设置 flex-grow 为 1 的元素等比例地放大以填充这些空间。‌15‌空间不足时等比例收缩‌当父容器空间不足以容纳所有子元素时flex-shrink: 1 会使得该元素与其他可收缩元素等比例缩小。‌