微信小程序--页面框架布局

创建page之后,在wxml中写的页面内容,都会包裹在<page>标签之中

若想像网页一样进行顶部、底部、内容等页面框架布局,仅仅写以下样式是不足够的

html 复制代码
<view style="height: 10%; background-color: blueviolet;">
  顶部
</view>

需要给父标签固定宽高或百分比,此时设置的宽高百分比才能生效

直接在页面样式文件中赋予page标签固定宽高

css 复制代码
page{
  height: 100%;
  background-color: pink;
}

最终效果:

相关推荐
276695829237 分钟前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir1 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir1 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe3 小时前
微信小程序唤起app
微信小程序·小程序
不老刘4 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
橘猫云计算机设计4 小时前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
Mr.Liu65 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳15 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域16 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源