Web_TracerMethodology/pages/changeSize/changeSize.vue

<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view>
		<view class="uni-padding-wrap uni-common-mt" style="margin-top: 50upx;">
			<view class="titleBox">
				<view style="font-size:25upx">A</view>
				<view style="font-size:30upx">标准</view>
				<view style="font-size:35upx">A</view>
				<view style="font-size:40upx">A</view>
			</view>
			
			<view>
				<slider min="10" max="16" :value="fontValue" @change="sliderChange" show-value step="2"/>
			</view>
		</view>
	</view>
</template>
<script>
	import base from '../../utils/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"
				})
			}*/
		}
	}
</script>
<style>
	.titleBox{
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30upx 0;
		margin-left: 5%;
    }
	
</style>