uniapp动态修改样式_Vue如何动态修改CSS变量

想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>里面又写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过给模板文件的:style动态复制从而间接的修改<style></style>里面的变量
 

<template>
   <div :style="{'--color':'red'}"></div>
 </template>

那接下来的就简单了，将red换成data里面的变量，把:style传过去的color变量调用起来
 

<template>
   <div :style="{'--color':color}">
     <div class="title color">测试</div>
   </div>
 </template>
 <script>
 export default {
   data () {
     return {
       color: 'red'
     }
   }
 }
 </script>
 <style lang="less" scoped>
  .color{
    color: var(--color) !important;
  }
  .title{
    color:blue;
  }
 </style>

案例

<template>
  <members-list
      title="已报名"
      :membersList="membersList" :finished="finished" :loading="loading"
      :showFollowBtn="applets !== 3"
      @listLoadMore="onLoadList"
      class="vant-list-wrap"
      :style="{
        '--scrollheight':calcScrollHeight
      }"
  />
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["applets"]),

    calcScrollHeight(){
      // #ifdef MP-WEIXIN
      let { windowHeight } = this.systemInfo;
      if (this.StatusBar > 20) return `${ windowHeight - this.StatusBar - 44}px`
      return `${ windowHeight - this.StatusBar - 44}px`
      // #endif
      // #ifndef MP-WEIXIN
      return '0px';
      // #endif
    },
  },
  data() {
    return {
      membersList: [],
      pageNo: 0,
      totalCount: 0,
      loading: false,
      finished: false,
      systemInfo:{},
    };
  },
  mounted(){
    // #ifdef MP-WEIXIN
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.systemInfo = res
      },
    });
    // #endif
  },
  methods: {
    onLoadList() {
      if (!this.finished) {
        this.loading = true;
        let actId = this.$route.query.id;
        this.pageNo += 1;
        this.getActMembersList(this.pageNo, 12, actId);
      }
    },
    getActMembersList(pageNo, pageSize, actId) {
      this.$axios
        .post("/social-cms-app/frontend/activity/actSign/queryByPage", {
          pageNo: pageNo,
          pageSize: pageSize,
          actId: actId,
        })
        .then(({ data }) => {
          this.loading = false;
          if (!data) { // 话题禁用时为null
            this.finished = true;
            return;
          }
          else {
            let list = data.list || [];
            this.membersList.push(...list);
            console.log("getmembersList");
            console.log(data);
            this.totalCount = data.totalCount;
            if (this.membersList.length >= this.totalCount) {
              this.finished = true;
            }
          }
        });
    },
  }
};
</script>

<style lang="scss" scoped>
// #ifdef MP-WEIXIN
.page{
  height: 100vh;
  overflow: hidden;
}
.vant-list-wrap{
  ::v-deep .page{
    // height: calc(100vh - 128px);
    padding-bottom: 0;
  }
  ::v-deep .members-list{
    height: var(--scrollheight)!important;
    padding: 0!important;
    van-list{
      scroll-view{
        height: var(--scrollheight)!important;
        .member{
          width: calc(100vw - 40px);
          margin: 0 auto;
          padding: 0 20px;
          border: none;
          position: relative;
        }
        .member::after{
          content: "";
          position: absolute;
          height: 1px;
          background: #F7F8FA;
          width: calc(100vw - 40px);
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}
// #endif
</style>

如果想要px不被编译，这使用 --startuspx 动态变量,通过:style方式避过css编译

<div class="page" :style="{'--fixedtop': fixedTopCalc,'--navbarheight':'44px'}"></div>