foreword
Recently, when I was working on a vue project and doing carousel effects based on DataV, I encountered the problem that the CSS style rendering could not be dynamically added after the data was loaded from the background, and then solved it after querying the data, and recorded it.
For a detailed introduction to DataV, please go to: Vue large-screen visualization DataV component library
Effect
Implementation steps:
HTML joins the carousel component:
<dv-scroll-board :config="config" style="width: 100%" />
js is as follows:
import {
listDataShow } from "@/api/buildscreen/datashow";
export default {
name: "screen-data-show",
components: {
},
props: {
},
computed: {
},
watch: {
},
data() {
return {
config: {
header: [],
data: [],
// index: true,
columnWidth: [500, 500],
align: ["center"],
rowNum: 6,
headerBGC: "#1981f6",
headerHeight: 45,
oddRowBGC: "transparent",
evenRowBGC: "transparent",
//waitTime: 1500, // 轮播时间间隔(ms)
},
};
},
created() {
this.getList();
},
mounted() {
},
methods: {
/** 查询项目列表 */
getList() {
this.loading = true;
listDataShow(this.queryParams).then((response) => {
let arrList = [];
for (let rows of response.data) {
if (rows.color == "red") {
arrList.push(
'<div class="roll-item red">' + rows.projectName + "</div>"
);
} else if (rows.color == "yellow") {
arrList.push(
'<div class="roll-item yellow">' + rows.projectName + "</div>"
);
} else if (rows.color == "blue") {
//把所有蓝色改成绿色
arrList.push(
'<div class="roll-item green">' + rows.projectName + "</div>"
);
}else{
arrList.push(
'<div class="roll-item blue">' + rows.projectName + "</div>"
);
}
}
if(response.data.length%2!=0){
arrList.push(
'<div class="roll-item" style="display:none"></div>'
);
}
let resultList = []; //拆分数组
for (var i = 0; i < arrList.length; i += 2) {
resultList.push(arrList.slice(i, i + 2));
}
this.config.data = resultList;
this.config = {
...this.config }; //必不可少，不可省略
});
},
},
};
</script>
Note: Because js dynamically loads css, as shown in the code below:
arrList.push(
'<div class="roll-item red">ddd</div>'
);
Therefore, when writing css, be careful not to write it <style lang="scss" scoped>down , <style >it will take effect if you write it down.
<style >
.roll-item {
width: 100%;
height: 95%;
color: #ffffff;
font-weight: bold;
font-size: 16px;
text-align: center;
border-radius: 3px;
}
.red {
background-color: #f56c6c;
border: 1px solid #f56c6c;
}
.blue {
background-color: #518cde;
border: 1px solid #518cde;
}
.green {
background-color: #83e63c;
border: 1px solid #83e63c;
}
.yellow {
box-shadow: -10px 0px 15px #e6a23c inset,
0px -10px 15px #e6a23c inset,
10px 0px 15px #e6a23c inset,
0px 10px 15px #e6a23c inset;
border: 1px solid #e6a23c;
}
</style>
<style lang="scss" scoped>
.header-center-decoration {
width: 40%;
height: 60px;
margin-top: 25px;
margin-left: -5%;
position:absolute
}
#scroll-board {
width: 100%;
box-sizing: border-box;
height: 100%;
overflow: hidden;
}
</style>