快捷導(dǎo)航

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

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

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

問題1

比如說，標(biāo)簽頁是一個整體的組件，但是我們需要將標(biāo)簽頁的標(biāo)題和其他組件一起固定到頂部就要將標(biāo)簽頁標(biāo)題分離出來，這時候我們可以自己寫一個樣式在將標(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,
? ? ? ? }
?? ?},
}

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

問題2

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

1.安裝lib-flexible

安裝命令

npm install lib-flexible --save

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

2.在項目的入口引入lib-flexible

在main.js中添加：

import ‘lib-flexible'

3.安裝postcss-px2rem-exclude

安裝命令

npm install postcss-px2rem-exclude --save

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

4.配置postcss.config.js

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

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

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

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

您可能感興趣的文章: