快捷導(dǎo)航

關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式

更新時(shí)間：2022年09月21日 09:11:50 作者：Serena_tz

這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

問(wèn)題1

比如說(shuō)，標(biāo)簽頁(yè)是一個(gè)整體的組件，但是我們需要將標(biāo)簽頁(yè)的標(biāo)題和其他組件一起固定到頂部就要將標(biāo)簽頁(yè)標(biāo)題分離出來(lái)，這時(shí)候我們可以自己寫一個(gè)樣式在將標(biāo)題分離

具體的代碼：

// 組件
<van-sticky>
? ? ?<van-nav-bar title="列表" border></van-nav-bar>
? ? ?
? ? ?<div class="top">
? ? ? ? ?<div class="title" :class="{ active: active==0 }" @click="active=0">待審批</div>
? ? ? ? ?<div class="title" :class="{ active: active==1 }" @click="active=1">已審批</div>
? ? ?</div>
?</van-sticky>

?<to-do v-if="active==0"></to-do>
?<have-to-do v-if="active==1"></have-to-do>

// ?數(shù)據(jù)
?export default {
?? ? data() {
? ? ? ? return {
? ? ? ? ? ? active: 0,
? ? ? ? }
?? ?},
}

主要原理就是使用一個(gè)數(shù)據(jù)，例如active進(jìn)行標(biāo)記。點(diǎn)擊不同的標(biāo)題時(shí)，修改該數(shù)據(jù)標(biāo)記的值，并且不同的標(biāo)題在active標(biāo)識(shí)激活后改變樣式，并且切換不同的面板。

問(wèn)題2

同時(shí)，以vant組件為例，這類組件自身用的單位是px，但是用作移動(dòng)端適配，我們應(yīng)該選擇rem，所以要進(jìn)行一下轉(zhuǎn)換。

1.安裝lib-flexible

安裝命令

npm install lib-flexible --save

這個(gè)插件原理就是根據(jù)屏幕寬度的變化從而自動(dòng)設(shè)置html根節(jié)點(diǎn)下的font-size大小。

2.在項(xiàng)目的入口引入lib-flexible

在main.js中添加：

import ‘lib-flexible'

3.安裝postcss-px2rem-exclude

安裝命令

npm install postcss-px2rem-exclude --save

這個(gè)插件在打包項(xiàng)目的時(shí)候?qū)x像素轉(zhuǎn)換為rem像素。

4.配置postcss.config.js

Vue3.0項(xiàng)目下默認(rèn)沒(méi)有這個(gè)文件,我們可以自己手動(dòng)新建一個(gè)postcss.config.js文件。并填入相應(yīng)的配置內(nèi)容，如下：

module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? 'postcss-px2rem-exclude': {
? ? //37.5是根據(jù)Vant組件的設(shè)計(jì)稿是375得來(lái)的,lib-flexible插件默認(rèn)是將375分為10等分,如果UI組件的設(shè)計(jì)稿是750,那么這里的設(shè)置就是填750/10=75
? ? ? remUnit: 37.5,
? ? ? exclude: /folder_name/i
? ? }
? }
}

接下來(lái)，啟動(dòng)項(xiàng)目就可以看到組件已經(jīng)完成了移動(dòng)端的適配。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: