【uni-app】JS动态修改scss样式变量

需求:

1、 当H5嵌入到APP时,使用H5自身的头部,需要兼容手机自带的navbar高度,因此在嵌入APP时,需要固定H5 navbar距离手机自带头部高度:$uni-head:44px; 而paging-head-top是由于z-paging定位导致会覆盖或高度不适配当前navbar,所以设置88px

2、 当H5嵌入到H5时,类似于使用手机浏览器打开的页面,就不需要固定距离手机自带的头部高度。因此需要根据环境动态修改scss定义的变量。所以需要根据嵌入的环境进行判断并动态控制样式。即:H5嵌入APP需要固定距离手机顶部高度,H5嵌入H5不需要固定该高度。

未增加距离手机顶部高度时(左:H5嵌入APP)以及已增加距离手机顶部高度(右:H5嵌入H5)

方案一:

1、在scss文件中定义变量和默认值:如uni.scss

css 复制代码
$uni-head: var(--uni-head, 44px); // 默认值 44px
$paging-head-top: var(--paging-head-top, 88px); // 默认值 88px

2、js文件中业务判断并修改变量:main.js

js 复制代码
// 通过 User Agent中是否含有有Html5Plus、uni-app、app判断 嵌入到哪个环境中:
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{ // 不存在则是其他环境 

}

结果展示:

H5嵌入APP(左:增加距离手机顶部高度44px);H5嵌入H5(右:未增加距离手机顶部高度)

方案二:可结合vuex进行动态修改

1、在Vuex store中定义对应样式变量

js 复制代码
// 在 Vuex store 中定义
const store = new Vuex.Store({
    state: {
        styleVars: {
            uniHeight: '44px', // 默认值
        },
    },
    mutations: {
        setStyleVar(state, { key, value }) {
            state.styleVars[key] = value;
        },
    },
});

2、在组件中使用计算属性绑定样式

html 复制代码
<template>
    <view :style="{ height: heightVar }">
        <!-- 组件内容 -->
    </view>
</template>

<script>
export default {
    computed: {
        heightVar() {
            return this.$store.state.styleVars.uniHeight;
        },
    },
};
</script>

多页面使用到该变量时可以将其定义成全局变量:main.js

js 复制代码
Vue.prototype.uniHeight = store.state.styleVars.uniHeight;
// 通过 User Agent中是否含有有Html5Plus、uni-app、app判断 嵌入到哪个环境中:
if (!uni.getSystemInfoSync().ua.includes('app')) { // 嵌入到h5
  // 更新全局样式变量
  Vue.prototype.$store.commit('setStyleVar', { key: 'uniHeight', value: '0px' });
}

组件中使用:

html 复制代码
<template>
    <view :style="{ height: uniHeight }">
        <!-- 组件内容 -->
    </view>
</template>

3、更新全局样式变量

js 复制代码
this.$store.commit('setStyleVar', { key: 'uniHeight', value: '0px' });
相关推荐
y东施效颦15 分钟前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
秋田君30 分钟前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
摸鱼仙人~1 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客1 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
华子w9089258591 小时前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
前端小咸鱼一条1 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
郑州小张2 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
吹牛逼专业户2 小时前
Vue中快速实现主题切换
vue.js
这是个栗子2 小时前
HTML(一)
javascript·ajax·css3·html5
uhakadotcom2 小时前
Python中@staticmethod和@classmethod的简单理解与实用示例
javascript·后端