导航栏

页面名.json（json中不能有注释，在此处及后面写上只是为了方便理解和记忆）

{//标题"navigationBarTitleText":"关于",//导航栏背景色（任何颜色）"navigationBarBackgroundColor":"#fff",//标题颜色（只有黑色/白色）"navigationBarTextStyle":"white"
}

注：没有单个标签

布局

一传统布局

about.wxml

<!-- view  容器元素控制其内元素 -->
<view class="container"><image src="/images/about.jpg"></image><text>电影周周看</text><text>我每周推荐一部好片</text><text>我的微博weibo.com/simbasong</text>
</view>

about.wxss

/* .info{font-weight:bold;font-size:30px;
} */
/* 100vh:高度为100% */
.container{background-color:#eee;height:100vh;text-align: center;
}
/* text元素变为块级元素 */
text {display:block;
}
/* 设置image text的下外边距 */
image,text {margin-bottom:60px;
}

截图：

在这里插入图片描述

二弹性盒子

整体布局

/* 100vh:高度为100%
display:flex  实现view的弹性盒子布局
flex-direction:column; 主轴方向为从上到下
justify-content:space-around;主轴方向上每个元素两侧有相同的空余空间
align-items:center; 元素居中*/
.container{background-color:#eee;height:100vh;display:flex;flex-direction:column;justify-content:space-around;align-items:center;
}

元素大小自适应-rpx

所有屏幕的宽高均为750rpx
上面代码后面加：

/* border-radius:50% 对应图片设置为圆形*/
.about-banner {width:375rpx;height:375rpx;border-radius:50%;
}

领取限量云产品优惠

小程序入门学习02--导航栏及基础页面布局相关推荐

微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
【小程序】自定义顶部导航栏（左上角返回等）
思路: 明白一点,右上角的胶囊按钮是隐藏不了的,是固定在右上角的,也意味着自定义导航栏时候不用考虑它先在需要自定义导航栏的A页面,配置"navigationStyle":&quo ...
小程序入门学习18--springboot环境配置02
springboot官方中文文档 1 pom.xml配置,第一次配置完成需要下载许多文件 <project xmlns="http://maven.apache.org/POM/4.0 ...
小程序入门学习13--云函数与数据库02
<button class="call" bindtap="getFile">获取文件</button> <button clas ...
微信小程序入门:学习demo以及自己的第一个小程序
<移动软件开发>实验1 一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.使用快速启动模板创建小程序 1.1为小程序命名. ...

小程序入门学习02--导航栏及基础页面布局

导航栏

布局

一传统布局

二弹性盒子

元素大小自适应-rpx

小程序入门学习02--导航栏及基础页面布局相关推荐

最新文章

热门文章

小程序入门学习02--导航栏及基础页面布局

导航栏

布局

一 传统布局

二 弹性盒子

元素大小自适应-rpx

小程序入门学习02--导航栏及基础页面布局相关推荐

最新文章

热门文章

一传统布局

二弹性盒子