1.在computed中定义一个变量,返回前缀为--的css对象
data(){
return{
top:100px,
}
}
computed: {
listTop() {
return {
'--listTop': this.top
}
}
}
2.在template中绑定在需要用到css变量的元素,或者该元素的上层元素上。
<view :style="listTop" class="container">
<!--具体内容 -->
</view>
3.在css代码中使用
<style lang="scss" scoped>
.container {
top: var(--listTop) !important;
}
</style>
参考: