欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp實(shí)現(xiàn)全局設(shè)置字體大小(小中大的字體切換)

 更新時(shí)間：2023年06月23日 11:08:53   作者：小佩丫  
隨著UniApp的流行,越來(lái)越多的開(kāi)發(fā)者選擇使用它來(lái)構(gòu)建跨平臺(tái)應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)全局設(shè)置字體大小(小中大的字體切換)的相關(guān)資料,需要的朋友可以參考下

一、效果圖

二、原理解析

要實(shí)現(xiàn)文字大小的動(dòng)態(tài)切換，考慮到使用rem機(jī)制。只需要通過(guò)修改根節(jié)點(diǎn)的font-size值，就能改變文字呈現(xiàn)出來(lái)的大小

但是一般我們的項(xiàng)目始用的都是px或rpx單位，全局修改單位未免不現(xiàn)實(shí)。所以這里用到了postcss-px-to-viewport插件。

postcss-px-to-viewport可以幫助我們把項(xiàng)目的單位進(jìn)行統(tǒng)一的轉(zhuǎn)換，且不需要改動(dòng)源代碼。

所以思路為：

  1. 利用postcss-px-to-viewport把單位全部轉(zhuǎn)換為rem
  2. 把根節(jié)點(diǎn)font-size值寫(xiě)入vuex中。
  3. 實(shí)現(xiàn)字體大小設(shè)置頁(yè)面。修改大小后，要把值寫(xiě)入緩存和vuex。
  4. APP啟動(dòng)時(shí)，從緩存里讀取上次設(shè)置的fontSize值，賦值給vuex_fontsize。
  5. 其他需要被控制大小的頁(yè)面，頂部添加代碼：
<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>

（說(shuō)明：寫(xiě)進(jìn)緩存是為了下次進(jìn)入頁(yè)面時(shí)還能保留上次設(shè)置的值，寫(xiě)進(jìn)vuex中是為了可以響應(yīng)式修改。）

三、代碼實(shí)現(xiàn)

（一）、安裝和配置postcss-px-to-viewport

1、安裝命令：

npm install postcss-px-to-viewport --save-dev

2、根目錄下創(chuàng)建一個(gè) postcss.config.js文件，文件內(nèi)容如下：

const path = require('path')
module.exports = {
  parser: 'postcss-comment',
  plugins: {
    'postcss-import': {
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    },
    'autoprefixer': {
      overrideBrowserslist: ["Android >= 4", "ios >= 8"],
      remove: process.env.UNI_PLATFORM !== 'h5'
    },
    // 借助postcss-px-to-viewport插件，實(shí)現(xiàn)px轉(zhuǎn)rem，文檔：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以將px轉(zhuǎn)換為rem，如果要調(diào)整比例，可以調(diào)整 viewportWidth 來(lái)實(shí)現(xiàn)
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要轉(zhuǎn)換的單位。我這里是px，如果你的項(xiàng)目都是用的rpx，就改成rpx
      viewportWidth: 1800,// 密度，一般為750 || 375。這里可以自己修改
      unitPrecision: 5,
      propList: ['*'],
	  viewportUnit: "rem", // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
      fontViewportUnit: 'rem', // 字體需要轉(zhuǎn)成的單位，只針對(duì) font-size 屬性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

（二）在vuex里定義vuex_fontsize

在你的store存儲(chǔ)里添加變量，我設(shè)置的是

vuex_fontsize: 18.75	//數(shù)值根據(jù)自己項(xiàng)目調(diào)整

（三）實(shí)現(xiàn)字體設(shè)置頁(yè)面

利用滑塊，設(shè)置font-size的值。點(diǎn)擊確定后，要把所設(shè)置的值寫(xiě)入vuex_fontsize和緩存里。

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="content">
		<view>
			<view class="fontchange">文字大小</view>
		</view>
		<view style="width:100%;padding: 0 10px;">
			<slider
				:min="16.25"
				:max="21.25"
				:value="fontValue"
				@change="sliderChange"
				:step="2.5"
			/>
			<view class="change-fontsize-box">
				<text style="font-size: 12px;">
					最小
				</text>
				<text style="font-size: 14px;">
					標(biāo)準(zhǔn)
				</text>
				<text style="font-size: 16px;">
					最大
				</text>
			</view>
		</view>
		<view style="padding: 20px 10px;width: 100%;">
			<u-button type="primary" @click="submit">確定</u-button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			fontValue: 18.75,
		};
	},
	onShow() {
		this.fontValue = this.vuex_fontsize;
	},
	methods: {
		sliderChange(e) {
			this.fontValue = e.detail.value;
		}
		submit() {
			this.$u.vuex('vuex_fontsize', this.fontValue);
			uni.setStorageSync("fontSize", this.vuex_fontsize);
			uni.showToast({
				title: '設(shè)置成功',
				icon:'none',
				duration: 1500
			});
		},
	},
};
</script>
<style>
.fontchange {
	font-size: 0.8rem;
	margin: 20px 0;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}
.change-fontsize-box{
	margin: 10px 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
</style>

（四）App啟動(dòng)時(shí)，讀取緩存值，賦值給vuex_fontsize

修改App.vue文件，添加以下代碼

onLaunch: function() {
	//讀取Storage里的字體大小
	let fontsize = uni.getStorageSync("fontSize")
	if (fontsize) {
		this.$u.vuex('vuex_fontsize',  fontsize);
	}
}

（五）其他頁(yè)面引用

在需要用到的頁(yè)面加上page-meta。如果是全局修改，就需要全部頁(yè)面都加上這。

<template>
	<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>
	<view>
		...
	</view>
</template>

用開(kāi)發(fā)者工具可以看到根節(jié)點(diǎn)html的font-size值可以被成功設(shè)置，且頁(yè)面元素的單位都是rem。大功告成~

總結(jié)

到此這篇關(guān)于uniapp實(shí)現(xiàn)全局設(shè)置字體大小的文章就介紹到這了,更多相關(guān)uniapp全局設(shè)置字體大小內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論