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