uniapp如何动态改变page的style样式

最新推荐文章于 2024-04-26 10:50:51 发布
最新推荐文章于 2024-04-26 10:50:51 发布
阅读量3.5k 收藏
点赞数 2
分类专栏： web前端 项目实战遇到的问题 文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38412122/article/details/128147162
版权

最近在做Uniapp小程序的需求，遇到关于需要动态改变page的样式问题，关于uniapp滚动穿透，最初发现设置page为overflow:hidden，但是不能写死，需要根据弹窗出现的时候设置该属性，可以利用​​page-meta​​​标签的​​page-style​​属性，相当于Html的Body属性
在这里插入图片描述

努力向上长的小小草啊
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-auto-pages:uni-app 自动配置pages.json
05-31
uni-auto-pages uni-app 开发中根据规则自动配置页面 pages，分包 subPackages,和 condition 生成 pages.josn 的 webpack 插件，使得开发者不需要手动的去维护 pages.json。类似 vue-auto-routing,使用非常简单。 安装 npm install uni-auto-pages 首先通过 vue-cli 创建 uni-app 项目 vue.config.js 配置 *注：template.json 参数是模版文件名 必须在 src 下，文件名可以自定义 默认名 template.json const UniAutoPagesPlugin = require('uni-auto-pages'); module.exports = { configureWebpack: { plugins: [new
js 动态修改css文件的方法
12-09
_.find(document.styleSheets[4].cssRules,function(cssRule){ if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){ cssRule.style.position=""; cssRule.style.top = "0px"; } if(cssRule.selectorText && cssRule.selectorText.indexOf("#pageIndi_content, #page1_l1_content, #page_a
uni-app小程序给单个页面设置page属性
webhhhhhh的博客
09-18 429
uni-app小程序给单个页面设置page属性 解决，在该.heml页面新增一个style,在里面设置page影视，如：设置单个页面的背景色为黑色，如下所示： <style> page{ background:#000; } </style> <style scoped> .content{ padding: 10px; } </style> ...
uni-app 修改指定页面背景
单飞吧的博客
01-09 1099
列：下面页码背景为红色，需要修改为蓝色 只需要在点前页码的style标签内添加样式 <style> page { background: blue; } </style>
uni-app中设置单个页面样式方法
爱吃猫的鱼
07-19 594
uni-app中设置单个页样式不生效解决方法
uniapp/移动端如何给单个页面设置样式
qq_45390948的博客
08-30 1869
设置整个页面的样式
uni-app 页面样式
m0_58492934的博客
06-14 5314
uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个
【uniapp】设置单个页面的背景色，使用page的方法
小黄呀呀呀的博客
06-22 2241
代码如下： 设置单个页面的整个背景色为红色， 当时想直接写 但是行不通。
uniapp小程序设置页面page的背景颜色
forever_ThreeMing的博客
09-16 2532
在原生小程序有时候设置page背景色不起作用，是因为page{background:XXX}属性值放在scope里面，即 <style lang="scss" scoped> </style> 可以新增一个style标签，放page，如 <style> page{ background:#FFFFFF; } </style> <style lang="scss" scoped> </style> 此处定义的page属性，
Uniapp动态修改CSS（通过js修改CSS）
热门推荐
m0_37792384的博客
07-16 1万+
例如产品给了我们个需求需要点击一次按钮来使得view1的宽度增加10px 在html开发中很好实现，但是在uniapp开发app的时候发现并不能通过document.getElementById("")来指定。那么该怎么实现呢？往下看。 1.先搭建页面 嗯~我知道很丑，但就酱紫。Ծ‸Ծ 2.重点！！！改造代码，将vHeight放入的style标签中。 注意看改造后的style 嗯~改造完成，试一下效果。 确实生效了。 总结一下 js中动态修改css样式，需要先定义好要修改的变量，注意style的书写
twitter ui page style
12-01
twitter us page style desktop
uniapp实现顶部选项卡动态高度
03-05
微信小诚寻、uinapp
PageOffice Java 动态填充Word模版
03-26
以生成工资条为例，演示了通过PageOffice开发平台，用Java语言实现Word文档的在线打开、编辑和保存，数据区域数据的动态填充和提交，数据区域插入Word文件，动态填充和提交Word文件中Tabel的数据
JavaScript动态改变HTML页面元素例如添加或删除
12-04
可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签，然后向该标签中添加相应的内容，然后将创建好的标签添加到相应的位置。 <!DOCTYPE ...
Uniapp微信小程序滚动条跳转到元素高度
09-04
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
asp.net中动态改变网页标题的代码
01-02
方法1. 首先：在.aspx页： <HEAD> <title> <%=PageTitle %> </title> 。... 其次：在.aspx.cs页： public class news_view : ... //动态设置网页的标题title为显示页内容的“标题” PageTitle=l
【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts（没有 uni_modules）
最新发布
花间半盘棋
04-26 352
然后按照图片中 README 所写的方式在项目中进行导入；下载的文件是如图所示的路径；就可以正常显示图表啦。
使用uni-app开发app时遇到mqtt.js不可用的问题
Alan_Walker688的博客
04-24 985
使用uni-app开发app时遇到mqtt.js不可用的问题踩坑与记录。
uniapp实现相册、拍照及视频录制功能
qq_40063198的博客
04-25 405
uniapp实现相册、拍照及视频录制功能
uniapp动态生成page.json
05-10
uniapp是一种基于Vue.js框架的前端开发框架，它可以同时在各种平台上创建高性能的本地应用。在uniapp中，Page.json是一个非常重要的文件，它描述了页面的一些属性，例如页面的路径、页面的颜色和页面的文字样式等。在uniapp中，我们可以通过使用JavaScript动态生成Page.json文件，从而允许我们在完全运行时生成页面。 首先，我们需要在uniapp中定义一个全局的变量config，并将它注册到Vue.prototype上。在config中，我们可以定义一些默认的页面属性。例如： ``` var config = { pages: [ { path: 'pages/index/index', style: { navigationBarTitleText: '首页' } }, { path: 'pages/about/about', style: { navigationBarTitleText: '关于我们' } } ] } Vue.prototype.$config = config; ``` 然后，我们就可以在我们的Vue组件中使用这个全局变量了。我们可以通过在mounted中动态生成Page.json文件。 ``` module.exports = { mounted() { var pages = this.$config.pages; var jsonStr = JSON.stringify({ "pages": pages }); uni.writeFile({ filePath: 'pages.json', data: jsonStr, success() { console.log('生成页面json成功') }, fail(e) { console.log('生成页面json失败', e) } }); }, } ``` 在上面的代码中，我们首先获取了我们定义的config的pages属性。然后，我们将这个pages转换为JSON格式并将其写入到pages.json文件中。如果生成pages.json文件成功，则会打印“生成页面json成功”，否则会打印“生成页面json失败”。 通过上述方法，我们可以成功地动态生成Page.json文件，并且可以在完全运行时动态生成页面。当用户访问某个页面时，uniapp会根据Page.json文件创建并渲染对应的页面。我们可以通过动态生成的Page.json来改变页面的一些样式和属性，从而实现更加丰富和灵活的页面设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值