页面属性配置节点,用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。 从微信基础库2.9.0开始,新增了page-meta组件,它是一个特殊的标签,有点类似html里的header标签。页面的背景色、原生导航栏的参数,都可以写在page-meta里。HBuilderX 2.6.3+ 支持了这个组件,并且全平台都实现了。 从某种意义...
小程序中的 page-meta 和 HTML 中的header设置meta比较类似,可以对页面的一些属性进行配置。 令人困惑的是,page-meta 的功能和 page.json 的功能及相关api的功能是重复的,提供page-meta这种方式,貌似只是一种语法糖,提供了另外一种风格。而且,page-meta 的执行效率还不如 page.json。 page-meta、page.json 及 ...
小程序中的 page-meta 和 HTML 中的header设置meta比较类似,可以对页面的一些属性进行配置。 令人困惑的是,page-meta 的功能和 page.json 的功能及相关api的功能是重复的,提供page-meta这种方式,貌似只是一种语法糖,提供了另外一种风格。而且,page-meta 的执行效率还不如 page.json。 page-meta、page.json 及 ...
// vue.config.js const uniPageMeta = require('vite-uni-pagemeta'); module.exports = { configureWebpack: { plugins: [ new uniPageMeta('pages|package') // 指定pages,package目录下的页面可以生成page-meta ] } } 注:如果不想某个页面或者组件不生成 page-meta 的话,就写在 components 目录下 ...
在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show10 变量的值来控制页面的滚动。当 show10 为true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。 2. 禁止Popup内容区域的滚动穿透 注意:在h5平台可以通过动态修改body标签的样式,设置 overflow:hidden 即可解决滚动穿透,无循...
<page-meta> <navigation-bar :background-color="theme":title="nbTitle"/> </page-meta> <viewclass="match"v-if="showPage"> </view> 初始值同样的避免闪烁,都是等页面加载完了,再出现 theme: '#F9FAFC', // 微信默认背景,主题色必须是6hex #0064A8 ...
page-meta:页面配置节点,用于指定页面的一些属性、监听页面事件,类似于html中的header标签,可以部分替代pages.json的功能。 二、实现步骤 1.1 安装第三方插件 postcss-px-to-viewport npm install postcss-px-to-viewport --save-dev 1. 1.2 项目根目录创建postcss.config.js,并写入配置 ...
rem 根字体大小可以通过page-meta配置 vh viewpoint height,视窗高度,1vh等于视窗高度的1% vw viewpoint width,视窗宽度,1vw等于视窗宽度的1% App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px。注意此时不支持 rpx ...
第二种方法:引用插件,将项目中的字体单位rpx换成rem,结合官网提供的page-meta属性,通过控制根字体大小,达到调节字体大小要求。 原贴地址 1.安装第三方插件postcss-px-to-viewport npm install postcss-px-to-viewport --save-dev 2.项目根目录创建postcss.config.js,并写入配置: ...
在页面中使用uni-popup组件时会出现滚动穿透问题,可以用page-meta组件控制页面是否滚动。 <template> <page-meta :page-style="`overflow:${pageScrollFlag?'visible':'hidden'}`"></page-meta> <view class="container"> <uni-popup ref="popup" background-color="#fff"> ...