uniapp用户设置字体大小-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp用户设置字体大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目前感觉没有特别完美的解决方法

1.首先新建一个功能js文件fongbase.js

export default {
    created() {
        const self = this;
 
    },
    mounted() {
        const self = this;
    },
    methods: {
        //设置字体
        getRootFontSize(){
            const self = this;
            var fontSize = getApp().globalData.rootFontSize;
            if(fontSize){
                return fontSize;
            }else{
                fontSize = uni.getStorageSync('root_font_size');
                if(fontSize){
                    getApp().globalData.rootFontSize=fontSize;
                }else{
                    fontSize='12px';//默认字体大小
                    self.setRootFontSize(fontSize);
                }
                return fontSize;
            }
        },
        setRootFontSize(fontSize){
            uni.setStorageSync('root_font_size',fontSize);
            getApp().globalData.rootFontSize=fontSize;
        },
 
    }
}

2.新建一个用户控制大小的界面，这里用的是uniapp的滑块组件

<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="content">
		<view class=""><view class="" style="font-size: 1rem;">文字大小</view></view>
		<view class="" style="width:100%;padding: 0 20rpx;">
			<slider
				style="width: 100%;"
				min="12"
				max="16"
				:value="fontValue"
				@change="sliderChange"
				show-value
				step="2"
			/>
		</view>
		<u-button type="primary" @click="submit">确定</u-button>
	</view>
</template>

<script>
import fontbase from '@/utils/fontbase.js';
export default {
	extends: fontbase,
	data() {
		return {
			fontValue: 12
		};
	},
	onLoad() {},
	onShow() {
		let a = this.getRootFontSize();
		let aa = a.substring(0, 2);
		this.fontValue = Number(aa);
	},
	methods: {
		submit() {
			uni.reLaunch({
				url:'/pages/v2-dealers/my/index'
			})
			console.log('submit');
		},
		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);
		}
	}
};
</script>

<style>
.fontchange {
	font-size: 1rem;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}

.logo {
	width: 100%;
	/* height: auto; */
	margin-top: 10px;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>

3.在想要修改的页面加代码块内容，麻烦的就是需要一个个页面去添加，然后改单位，我的理解是page-mate的根字节大小改为了14px，那么单位要改为rem，1rem=14px，所以说这个字体大小感觉不是很精确文章来源地址https://www.toymoban.com/news/detail-512063.html

<page-meta  :root-font-size="getRootFontSize()"></page-meta>

	import fontbase from '@/utils/fontbase.js'
	export default {
		extends:fontbase,

.fontchange{
		font-size: 1rem;
	}

到了这里，关于uniapp用户设置字体大小的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！