關(guān)于應(yīng)用UI組件的移動端適配方式
在移動端開發(fā)應(yīng)用UI組件也會遇到一系列需要注意的問題。
問題1
比如說，標(biāo)簽頁是一個(gè)整體的組件，但是我們需要將標(biāo)簽頁的標(biāo)題和其他組件一起固定到頂部就要將標(biāo)簽頁標(biāo)題分離出來，這時(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)識激活后改變樣式，并且切換不同的面板。
問題2
同時(shí)，以vant組件為例，這類組件自身用的單位是px，但是用作移動端適配，我們應(yīng)該選擇rem，所以要進(jìn)行一下轉(zhuǎn)換。
1.安裝lib-flexible
安裝命令
npm install lib-flexible --save
這個(gè)插件原理就是根據(jù)屏幕寬度的變化從而自動設(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)沒有這個(gè)文件,我們可以自己手動新建一個(gè)postcss.config.js文件。并填入相應(yīng)的配置內(nèi)容，如下：
module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? 'postcss-px2rem-exclude': {
? ? //37.5是根據(jù)Vant組件的設(shè)計(jì)稿是375得來的,lib-flexible插件默認(rèn)是將375分為10等分,如果UI組件的設(shè)計(jì)稿是750,那么這里的設(shè)置就是填750/10=75
? ? ? remUnit: 37.5,
? ? ? exclude: /folder_name/i
? ? }
? }
}接下來，啟動項(xiàng)目就可以看到組件已經(jīng)完成了移動端的適配。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)img的src動態(tài)賦值
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)img的src動態(tài)賦值方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個(gè)vue實(shí)例從創(chuàng)建到銷毀的過程，就是這個(gè)vue實(shí)例的生命周期,在這個(gè)過程中，他經(jīng)歷了從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,那么這些過程中，具體vue做了些啥，我們今天來了解一下2023-05-05
這篇文章主要介紹了Vue中jsx不完全應(yīng)用指南小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法
這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
vue-router路由懶加載及實(shí)現(xiàn)方式
這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將 路由對應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪問到的時(shí)候，才會加載對應(yīng)組件的代碼塊，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了使用Vite處理css?less及postcss的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明
這篇文章主要介紹了vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09