uniapp动态修改样式_Vue如何动态修改CSS变量
想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>⾥⾯⼜写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过给模板⽂件的:style动态复制从⽽间接的修改<style></style>⾥⾯的变量
<template>
<div :></div>
</template>
那接下来的就简单了，将red换成data⾥⾯的变量，把:style传过去的color变量调⽤起来
<template>
<div :>
<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"
:
/>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["applets"]),
calcScrollHeight(){
// #ifdef MP-WEIXIN
let { windowHeight } = this.systemInfo;
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
},
css变量},
data() {
return {
membersList: [],
pageNo: 0,
totalCount: 0,
loading: false,
finished: false,
systemInfo:{},
};
},
mounted(){
// #ifdef MP-WEIXIN
let that = this;
success: function (res) {
that.systemInfo = res
},
});
// #endif
},
methods: {
onLoadList() {
if (!this.finished) {
this.loading = true;
let actId = this.$route.query.id;
this.pageNo += 1;
}
},
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 || [];
console.log("getmembersList");
console.log(data);
if (bersList.length >= alCount) {
this.finished = true;
}
}
});
},
}
};
</script>
</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" :></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。