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

Dear 丶 2022-10-13 05:25 2204阅读 0赞

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

  1. <template>
  2.    <div :style="{'--color':'red'}"></div>
  3.  </template>

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

  1. <template>
  2.    <div :style="{'--color':color}">
  3.      <div class="title color">测试</div>
  4.    </div>
  5.  </template>
  6.  <script>
  7.  export default {
  8.    data () {
  9.      return {
  10.        color: 'red'
  11.      }
  12.    }
  13.  }
  14.  </script>
  15.  <style lang="less" scoped>
  16.   .color{
  17.     color: var(--color) !important;
  18.   }
  19.   .title{
  20.     color:blue;
  21.   }
  22.  </style>

案例

  1. <template>
  2.   <members-list
  3.       title="已报名"
  4.       :membersList="membersList" :finished="finished" :loading="loading"
  5.       :showFollowBtn="applets !== 3"
  6.       @listLoadMore="onLoadList"
  7.       class="vant-list-wrap"
  8.       :style="{
  9.         '--scrollheight':calcScrollHeight
  10.       }"
  11.   />
  12. </template>
  14. <script>
  15. import { mapState } from "vuex";
  16. export default {
  17.   computed: {
  18.     ...mapState(["applets"]),
  20.     calcScrollHeight(){
  21.       // #ifdef MP-WEIXIN
  22.       let { windowHeight } = this.systemInfo;
  23.       if (this.StatusBar > 20) return `${ windowHeight - this.StatusBar - 44}px`
  24.       return `${ windowHeight - this.StatusBar - 44}px`
  25.       // #endif
  26.       // #ifndef MP-WEIXIN
  27.       return '0px';
  28.       // #endif
  29.     },
  30.   },
  31.   data() {
  32.     return {
  33.       membersList: [],
  34.       pageNo: 0,
  35.       totalCount: 0,
  36.       loading: false,
  37.       finished: false,
  38.       systemInfo:{},
  39.     };
  40.   },
  41.   mounted(){
  42.     // #ifdef MP-WEIXIN
  43.     let that = this;
  44.     wx.getSystemInfo({
  45.       success: function (res) {
  46.         that.systemInfo = res
  47.       },
  48.     });
  49.     // #endif
  50.   },
  51.   methods: {
  52.     onLoadList() {
  53.       if (!this.finished) {
  54.         this.loading = true;
  55.         let actId = this.$route.query.id;
  56.         this.pageNo += 1;
  57.         this.getActMembersList(this.pageNo, 12, actId);
  58.       }
  59.     },
  60.     getActMembersList(pageNo, pageSize, actId) {
  61.       this.$axios
  62.         .post("/social-cms-app/frontend/activity/actSign/queryByPage", {
  63.           pageNo: pageNo,
  64.           pageSize: pageSize,
  65.           actId: actId,
  66.         })
  67.         .then(({ data }) => {
  68.           this.loading = false;
  69.           if (!data) { // 话题禁用时为null
  70.             this.finished = true;
  71.             return;
  72.           }
  73.           else {
  74.             let list = data.list || [];
  75.             this.membersList.push(...list);
  76.             console.log("getmembersList");
  77.             console.log(data);
  78.             this.totalCount = data.totalCount;
  79.             if (this.membersList.length >= this.totalCount) {
  80.               this.finished = true;
  81.             }
  82.           }
  83.         });
  84.     },
  85.   }
  86. };
  87. </script>
  89. <style lang="scss" scoped>
  90. // #ifdef MP-WEIXIN
  91. .page{
  92.   height: 100vh;
  93.   overflow: hidden;
  94. }
  95. .vant-list-wrap{
  96.   ::v-deep .page{
  97.     // height: calc(100vh - 128px);
  98.     padding-bottom: 0;
  99.   }
  100.   ::v-deep .members-list{
  101.     height: var(--scrollheight)!important;
  102.     padding: 0!important;
  103.     van-list{
  104.       scroll-view{
  105.         height: var(--scrollheight)!important;
  106.         .member{
  107.           width: calc(100vw - 40px);
  108.           margin: 0 auto;
  109.           padding: 0 20px;
  110.           border: none;
  111.           position: relative;
  112.         }
  113.         .member::after{
  114.           content: "";
  115.           position: absolute;
  116.           height: 1px;
  117.           background: #F7F8FA;
  118.           width: calc(100vw - 40px);
  119.           bottom: 0;
  120.           left: 50%;
  121.           transform: translateX(-50%);
  122.         }
  123.       }
  124.     }
  125.   }
  126. }
  127. // #endif
  128. </style>

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

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

发表评论

表情：
评论列表 （有 0 条评论，2204人围观）

还没有评论，来说两句吧...

相关阅读