uniapp 中使用 rem 以及改变窗口动态刷新页面

这篇具有很好参考价值的文章主要介绍了uniapp 中使用 rem 以及改变窗口动态刷新页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注意:页面元素需要全部使用 rem 作为单位。

1.使用 uniapp 中的页面属性配置节点,page-meta,注意放在根元素的位置,也就是 template下面的第一层

<template>
	<page-meta :root-font-size="fontsize+'px'" user-scalable=no viewport-fit=cover style="display: block;"></page-meta>
    // 下面是要显示的页面
	<view class="bigStyle">
        ......
	</view>
</template>

2.获取屏幕大小以及监听窗口改变事件

        onLoad() {
			let srceenNunber = 409.6; // 根据设计稿计算的比例 设计稿宽度/10
			let that = this;

			//窗体改变大小触发事件
			uni.onWindowResize((res) => {
				console.log('变化后的窗口宽度=', res.size.windowWidth);
				that.fontsize = parseFloat(res.size.windowWidth) / srceenNunber;

				// 重新渲染页面
				uni.$emit('changeRootFontSize', that.fontsize);
			})

			//打开获取屏幕大小
			uni.getSystemInfo({
				success(res) {
					that.fontsize = res.screenWidth / srceenNunber;
					console.log('字体大小:', that.fontsize);

					// 重新渲染页面
					uni.$emit('changeRootFontSize', that.fontsize);
				}
			})
		},

3. app.vue 页面触发重新渲染页面

        created() {
			uni.$on('changeRootFontSize', (newFontSize) => {
				document.documentElement.style.fontSize = newFontSize + 'px';
				this.$forceUpdate();
			});
		}

文章来源地址https://www.toymoban.com/news/detail-821775.html

到了这里,关于uniapp 中使用 rem 以及改变窗口动态刷新页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp开发使用插件z-paging实现页面下拉刷新、上拉加载,分页加载

    在uniapp官网有一个比较好用的插件z-paging,可以实现多条数据滚动显示或者自定义下拉刷新,分页显示......在开发消息页面或者app开发需要大量的页面刷新,页面内容过长,减轻服务器的负担就可以使用此插件,进入app智慧加载部分内容,等到再次需要之后的内容就再次加载

    2024年02月11日
    浏览(54)
  • uniapp 自定义tabbar页面不刷新

    最近在做自定义tabbar时,每次切换页面都要刷新,页面渲染很慢,需要实现切换页面不刷新问题。 结局思路,原生的tabbar切换页面时就不选新,用switchTab来跳转 1.pages.json中配置tabbar,如下,设置高度为0,界面只需要设置路径 2. app.vue中隐藏原生tabbar 3.在自定义tab页面中用swi

    2024年02月05日
    浏览(37)
  • uniapp小程序给指定的页面新增下拉刷新功能

    需求:有些页面需要实时更新数据,但是又不能做实时刷新,所以给用户一个手动下拉刷新指定接口的功能 然后就没有然后了!  

    2024年04月11日
    浏览(37)
  • selenium 动态爬取页面使用教程以及使用案例

    Selenium是一款功能强大的自动化Web浏览器交互工具。它可以模拟真实用户在网页上的操作,例如点击、滚动、输入等等。Selenium可以爬取其他库难以爬取的网站,特别是那些需要登录或使用JavaScript的网站。Selenium可以自动地从Web页面中提取数据,例如价格、评论、评分等等。

    2024年02月09日
    浏览(54)
  • 基于uniapp的微信小程序如何刷新页面(绝对有效)

    由于我的毕业设计就是用uniapp写的微信小程序。 碰到了这样的问题,查了许多资料,最终找到了这样的方法。 现在写出来给大家节约时间和精力。 就是用uni.redirectTo 实现页面跳转从而实现页面刷新 注意:这不能刷新tabBar页面 不要傻乎乎的用在tabBar上 跳转到tabBar页面只能使

    2024年02月11日
    浏览(58)
  • 异步处理:uniapp中data属性改变页面不生效常问题记录

            简单描述一下场景:点击按钮,调用服务端校验用户信息是否完善,如果不完善则跳转指定页面引导完善用户信息;如果用户信息完善则调用服务端接口获取商品信息并展示.页面初始化用户信息是否完善标识: userInfoIsFull ,默认为false。调用服务端校验用户信息是否完善

    2023年04月24日
    浏览(34)
  • vue 动态路由刷新失效及404页面处理

    在开发后台管理项目,我们会使用vue动态路由做权限管理,但是使用vue动态路由时会遇到一些坑,这里总结一下,并提供解决思路 问题:刷新页面时会把addRouter添加的动态路由刷新掉,因此浏览器找不到之前添加的路由,便会进入白屏页面或者404页面 处理方式:判断是否刷

    2024年02月12日
    浏览(55)
  • uniapp微信小程序切换到tabber页面没有自动刷新

    前言 通过uni.switchTab跳转到tabber页面比如个人中心页面,更新的数据没有刷新。导致页面的数据还是修改之前的 解决方法 在uni.switchTab()加入回调函数; uni.switchTab成功跳转后调用success,此时可以拿到跳转后页面的page对象,从而调用页面onLoad方法重载页面。 或者 两种方法只是

    2024年02月11日
    浏览(60)
  • vue3 动态添加路由刷新后页面丢失(白屏)问题

    动态添加路由操作一般是用vuex或者Pinia封装,在登录页面调用 如果出现刷新页面丢失有两种可能: 1:vuex或者Pinia没有做持久化处理 2:动态添加路由需要在main.ts里面也调用一次 不需要路由守卫即可实现 注意:必须要在页面挂载前还有路由配置完成前调用添加,不然还是丢

    2024年02月16日
    浏览(56)
  • uniapp、小程序选择数据后携带数据返回上一页且不刷新页面

    优先推荐方法三 图示: 从新建线索页面A跳转到选择线索页面B,然后选择相应线索之后再返回新建线索页面,且原来的表单数据不能丢失 方法一:使用uni.$emit  利用这个方法可以往uni这个对象身上添加自定义事件,然后通过uni.$on方法在生命周期onShow里面去触发事件,通过触

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包