uni-app如何用JS動態(tài)修改scss樣式變量
需求：
1、 當(dāng)H5嵌入到APP時，使用H5自身的頭部，需要兼容手機(jī)自帶的navbar高度，因此在嵌入APP時，需要固定H5 navbar距離手機(jī)自帶頭部高度：$uni-head:44px; 而paging-head-top是由于z-paging定位導(dǎo)致會覆蓋或高度不適配當(dāng)前navbar，所以設(shè)置88px。
2、 當(dāng)H5嵌入到H5時，類似于使用手機(jī)瀏覽器打開的頁面，就不需要固定距離手機(jī)自帶的頭部高度。因此需要根據(jù)環(huán)境動態(tài)修改scss定義的變量。所以需要根據(jù)嵌入的環(huán)境進(jìn)行判斷并動態(tài)控制樣式。即：H5嵌入APP需要固定距離手機(jī)頂部高度，H5嵌入H5不需要固定該高度。
未增加距離手機(jī)頂部高度時（左：H5嵌入APP）以及已增加距離手機(jī)頂部高度（右：H5嵌入H5）
方案一：
1、在scss文件中定義變量和默認(rèn)值：如uni.scss
$uni-head: var(--uni-head, 44px); // 默認(rèn)值 44px $paging-head-top: var(--paging-head-top, 88px); // 默認(rèn)值 88px
2、js文件中業(yè)務(wù)判斷并修改變量：main.js
// 通過 User Agent中是否含有有Html5Plus、uni-app、app判斷 嵌入到哪個環(huán)境中：
if (!uni.getSystemInfoSync().ua.includes('app')) { // 嵌入到h5
document.getElementsByTagName('body')[0].style.setProperty('--uni-head', '0');
document.getElementsByTagName('body')[0].style.setProperty('--paging-head-top', '44px');
}
// 或者通過 window.plus 判斷:
if(window.plus){ // 存在則是嵌入到APP
}else{ // 不存在則是其他環(huán)境
}
結(jié)果展示：
H5嵌入APP(左：增加距離手機(jī)頂部高度44px)；H5嵌入H5(右：未增加距離手機(jī)頂部高度)
方案二：可結(jié)合vuex進(jìn)行動態(tài)修改
1、在Vuex store中定義對應(yīng)樣式變量
// 在 Vuex store 中定義
const store = new Vuex.Store({
state: {
styleVars: {
uniHeight: '44px', // 默認(rèn)值
},
},
mutations: {
setStyleVar(state, { key, value }) {
state.styleVars[key] = value;
},
},
});
2、在組件中使用計(jì)算屬性綁定樣式
<template>
<view :style="{ height: heightVar }">
<!-- 組件內(nèi)容 -->
</view>
</template>
<script>
export default {
computed: {
heightVar() {
return this.$store.state.styleVars.uniHeight;
},
},
};
</script>
多頁面使用到該變量時可以將其定義成全局變量：main.js
Vue.prototype.uniHeight = store.state.styleVars.uniHeight;
// 通過 User Agent中是否含有有Html5Plus、uni-app、app判斷 嵌入到哪個環(huán)境中：
if (!uni.getSystemInfoSync().ua.includes('app')) { // 嵌入到h5
// 更新全局樣式變量
Vue.prototype.$store.commit('setStyleVar', { key: 'uniHeight', value: '0px' });
}
組件中使用：
<template>
<view :style="{ height: uniHeight }">
<!-- 組件內(nèi)容 -->
</view>
</template>
3、更新全局樣式變量
this.$store.commit('setStyleVar', { key: 'uniHeight', value: '0px' });總結(jié)
到此這篇關(guān)于uni-app用JS動態(tài)修改scss樣式變量的文章就介紹到這了,更多相關(guān)JS動態(tài)修改scss樣式變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)的貝塞爾曲線算法簡單示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的貝塞爾曲線算法,結(jié)合簡單實(shí)例形式分析了基于javascript的貝塞爾曲線算法的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法
比較數(shù)組中數(shù)值的大小是比較常見的操作，本文主要介紹了javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果
這篇文章主要介紹了用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果的方法,而且在多瀏覽器下的兼容效果也得到提升,需要的朋友可以參考下2015-11-11
本篇文章通過例舉代碼分析的方式給大家講解了JavaScript數(shù)組操作難點(diǎn)以及需要注意的地方，一起學(xué)習(xí)參考下吧。2017-12-12
javascript操作向表格中動態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了javascript操作向表格中動態(tài)加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖動模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript在瀏覽器中的性能成為開發(fā)者所面臨的最重要的可用性問題。而這個問題又因JavaScript的阻塞特性變的復(fù)雜，也就是說當(dāng)瀏覽器在執(zhí)行JavaScript代碼時，不能同時做其他任何事情。本文詳細(xì)介紹了如何正確的加載和執(zhí)行JavaScript代碼，從而提高其在瀏覽器中的性能。2017-02-02
這篇文章主要為大家介紹了JavaScript迭代器模式內(nèi)部黑盒子解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
前端如何用post的方式進(jìn)行eventSource請求
這篇文章主要給大家介紹了關(guān)于前端如何用post的方式進(jìn)行eventSource請求的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-04-04