uniapp改变设置改变全局字体大小功能 |
您所在的位置:网站首页 › 支付宝怎么把字体调小 › uniapp改变设置改变全局字体大小功能 |
做一个能够控制app全部页面字体大小的功能 类似于微信设置中的,调节字体大小功能 PlanA:(在百度上查到的) 通过在页面设置page-meta,设置根节点大小,来控制页面元素rem单位的大小 https://uniapp.dcloud.io/component/page-meta?id=page-meta 具体步骤: 1.创建一个公共的base.js文件 2.设置修改字体的页面 ①在页面头加入page-meta ②引入base.js ③我这里引入了一个类似于微信改变字体大小的滑动条,滑动条改变时触发函数,保存字体大小到内存中,注意改变根元素字体大小后,需要刷新页面才能展示出来,我使用的是uni.relaunch跳转到页面(可以跳转到对应页面,并关闭其余页面) A 标准 A A import base from '@/common/base.js'; export default { extends: base, data() { return { fontValue:12, rootFontSize:'12upx', fontStart:uni.getStorageSync('root_font_size') + '', fontEnd:uni.getStorageSync('root_font_size') + '' } }, onLoad() { const self = this; //当前字体大小 self.fontValue = parseInt(self.getRootFontSize().split('px')[0]); console.log(self.fontValue ) }, methods: { sliderChange(e) { console.log('value 发生变化:' + e.detail.value) const self = this; let nowFontSize = e.detail.value + 'px'; console.log(nowFontSize) self.fontEnd = nowFontSize; console.log(nowFontSize) self.setRootFontSize(nowFontSize); }, //这里设置一个事件,使用uni.reLaunch跳转到某个页面,并关闭所有页面 /*onNavigationBarButtonTap() { uni.reLaunch({ url:"../tabbar-4" }) }*/ } } .titleBox{ width: 80%; display: flex; align-items: center; justify-content: space-between; margin: 30upx 0; margin-left: 5%; }4.在需要跟随根元素字体大小随之改变的页面中 ①在页面头加入page-meta ②引入base.js ③将元素的单位设置为rem
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |