Table of contents
1. Realization of the hero list
1. Introduce element Lib and VUE
2. Set the dynamic display of the scroll bar
1) Set the corresponding VUE parameter name: scrollHiddenVar
3) mounted set mouse monitoring event
To achieve similar functions, divide into different segments according to the score
1. Realization of the hero list
1. Introduce element Lib and VUE
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>英雄榜</title>
<link rel="stylesheet" href="js/element_lib/theme-chalk/index.css">
<link rel='stylesheet' href='assets/myCss/gudianxiaoshuo.css' charset="utf-8">
</head>
<link rel='stylesheet' href='assets/css/kuaileketang.css' charset="utf-8">
<script src="js\vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/comp/comp_headBtns.js" charset="utf-8"></script>2. Set the dynamic display of the scroll bar
<style>
::-webkit-scrollbar {
width: 16px;
display:var(--scrollbar);
}
::-webkit-scrollbar-thumb {
background:var(--scrollCorlor);
box-shadow: inset 0 0 4px green;
border-radius: 30px;
}
#mainContent:fullscreen {
background-color:var(--fullCorlor);
}
#mainContent{
padding-left: 100px;
padding-right:100px;
}
</style>1) Set the corresponding VUE parameter name: scrollHiddenVar
:style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar}">
2) VUE data definition
scrollHiddenVar: 'none',3) mounted set mouse monitoring event
window.addEventListener('mousemove', this.myEventFunc);4) Monitoring method
myEventFunc(event) {
let x = event.pageX;
let rect = document.getElementById('mainContent').getBoundingClientRect();
if (x > rect.right - 50)
this.scrollHiddenVar = 'inline';
else
this.scrollHiddenVar = 'none';
}3. Set element Table
<el-main1 id='mainContent' style='overflow:auto;' :style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar}">
<el-table :show-header=true :data='tableData1' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
<el-table-column align='center' prop='id' label='英雄榜' width='180'>
</el-table-column>
<el-table-column align='center' prop='name' label='姓名'>
</el-table-column>
<el-table-column align='center' prop='score' label='分数'>
</el-table-column>
</el-table>
<el-table :show-header=false :data='tableData2' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
<el-table-column align='center' prop='id' label='英雄榜' width='180'>
</el-table-column>
<el-table-column align='center' prop='name' label='姓名'>
</el-table-column>
<el-table-column align='center' prop='score' label='分数'>
</el-table-column>
</el-table>
<el-table :show-header=false :data='tableData3' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
<el-table-column align='center' prop='id' label='英雄榜' width='180'>
</el-table-column>
<el-table-column align='center' prop='name' label='姓名'>
</el-table-column>
<el-table-column align='center' prop='score' label='分数'>
</el-table-column>
</el-table>
<el-table :show-header=false :data='tableData4' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
<el-table-column align='center' prop='id' label='英雄榜' width='180'>
</el-table-column>
<el-table-column align='center' prop='name' label='姓名'>
</el-table-column>
<el-table-column align='center' prop='score' label='分数'>
</el-table-column>
</el-table>
<el-table :show-header=false :data='tableData5' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'>
<el-table-column align='center' prop='id' label='英雄榜' width='180'>
</el-table-column>
<el-table-column align='center' prop='name' label='姓名'>
</el-table-column>
<el-table-column align='center' prop='score' label='分数'>
</el-table-column>
</el-table>
<p></p>
</el-main1>4. table array
function getTableNum() { return 5; }
function getTable1() {
var tableData = [{ id: '至尊王者 4人', name: '刘心莹', score: 231 },
{ id: '至尊王者 4人', name: '梁维佳', score: 170 },
{ id: '至尊王者 4人', name: '陈玉雨', score: 127 },
{ id: '至尊王者 4人', name: '王静萱', score: 114 }
]
return tableData;
}
function getTable2() {
var tableData = [{ id: '王者 13人', name: '黄健桐', score: 106 },
{ id: '王者 13人', name: '梁舒然', score: 104 },
{ id: '王者 13人', name: '刘江彬', score: 98 },
{ id: '王者 13人', name: '陀天成', score: 95 },
{ id: '王者 13人', name: '林喜兰', score: 93 },
{ id: '王者 13人', name: '张嘉怡', score: 93 },
{ id: '王者 13人', name: '甘紫琳', score: 92 },
{ id: '王者 13人', name: '刘航兰', score: 91 },
{ id: '王者 13人', name: '谭李明', score: 90 },
{ id: '王者 13人', name: '黎挺彬', score: 90 },
{ id: '王者 13人', name: '李柱炫', score: 90 },
{ id: '王者 13人', name: '梁韵怡', score: 90 },
{ id: '王者 13人', name: '郑海华', score: 90 }
]
return tableData;
}
function getTable3() {
var tableData = [{ id: '黄金 8人', name: '李光森', score: 88 },
{ id: '黄金 8人', name: '梁健宇', score: 88 },
{ id: '黄金 8人', name: '梁欣棋', score: 88 },
{ id: '黄金 8人', name: '欧家成', score: 88 },
{ id: '黄金 8人', name: '陈俊昌', score: 88 },
{ id: '黄金 8人', name: '秦子航', score: 85 },
{ id: '黄金 8人', name: '刘童瑶', score: 85 },
{ id: '黄金 8人', name: '郑丽莎', score: 85 }
]
return tableData;
}
function getTable4() {
var tableData = [{ id: '白银 1人', name: '梁洪霖', score: 72 }]
return tableData;
}
function getTable5() {
var tableData = [{ id: '青铜', name: '无' }]
return tableData;
}5. VUE core code
new Vue({
el: '#app',
data: function() {
return {
fit: "contain",
imgUrl: 'http://gudianxiaoshuo.com/js/logo.gif',
gongzhonghaoUrl: 'http://gudianxiaoshuo.com/js/gongzhonghao.jpg',
toutiaohaoUrl: 'http://gudianxiaoshuo.com/js/toutiaohao.png',
options: [],
colorArr: [],
colorName: '默认',
fontName: "宋体",
fontSizeOptions: [],
fontSize: 20,
textColor: null,
bgColor: null,
showTip: true,
foolcolorVar: 'rgb(255,255,255)',
scrollcolorVar: 'rgb(255,255,255)',
scrollHiddenVar: 'none',
zanshangUrl: "",
tableData1: [],
tableData2: [],
tableData3: [],
tableData4: [],
tableData5: [],
tableData6: [],
tableData7: [],
tableData8: [],
tableData9: [],
tableData10: [],
tableData11: [],
tableData12: [],
tableData13: [],
tableData14: [],
tableData15: [],
tableData16: [],
tableData17: [],
tableData18: [],
tableData19: [],
tableData20: []
}
},
methods: {
open() {
this.$message('右键，选择大声朗读即可');
},
closeTip() {
localStorage.setItem('tipClosed', '1');
},
selectOne(fontName) {
var fontFamily = "font-family:" + fontName;
document.querySelector('#app').style.setProperty('font-family', fontName)
localStorage.setItem('font', fontFamily);
localStorage.setItem('fontName', fontName);
},
selectFontSize(fontSize) {
// document.body.requestFullscreen();
document.querySelector('#app').style.setProperty('font-size', fontSize)
localStorage.setItem('fontSize', fontSize);
},
selectColorName(colorIndex) {
console.log(colorIndex);
console.log(this.colorArr[colorIndex]);
this.setTBColor(this.colorArr[colorIndex].textcolor, this.colorArr[colorIndex].bg);
localStorage.setItem('corlorIndex', colorIndex);
},
setTBColor(textColor, bgColor) {
document.querySelector('body').style.setProperty('background', bgColor)
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.color = textColor;
}
localStorage.setItem('bg', bgColor);
localStorage.setItem('pColor', textColor);
this.textColor = textColor;
this.bgColor = bgColor;
},
el_colorPic_change() {
this.setTBColor(this.textColor, this.bgColor);
this.saveRand(this.textColor, this.bgColor);
console.log(this.textColor)
},
saveRand(textColor, bgColor) {
var lastElemName = this.colorArr[this.colorArr.length - 1].name;
if (lastElemName == '随机色') {
this.colorArr[this.colorArr.length - 1].bg = bgColor;
this.colorArr[this.colorArr.length - 1].textcolor = textColor;
} else {
var fontElem = {};
fontElem.name = '随机色';
fontElem.bg = bgColor;
fontElem.textcolor = textColor;
this.colorArr.push(fontElem);
}
localStorage.setItem('Randbg', bgColor);
localStorage.setItem('RandTColor', textColor);
},
rdmRgbColor() {
const arr = [];
for (let i = 0; i < 3; i++) {
arr.push(Math.floor(Math.random() * 256));
}
const [r, g, b] = arr;
var color = `rgb(${r},${g},${b})`;
return color;
},
colorBtn: function(name) {
console.log(name);
if (name == "btn1") {
this.setTBColor('rgb(89,89,89)', 'rgb(255,255,255)');
} else if (name == "btn2") {
this.setTBColor('rgb(91,70,54)', 'rgb(242,236,216)');
} else if (name == "btn3") {
this.setTBColor('rgb(51,51,51)', 'rgb(206,234,186)');
} else if (name == "btn4") {
this.setTBColor('rgb(157,159,163)', 'rgb(69,72,74)');
} else if (name == "btn5") {
this.setTBColor('rgb(181,172,162)', 'rgb(51,51,51)');
} else if (name == 'rand') {
let bgColor = this.rdmRgbColor();
let textColor = this.rdmRgbColor();
this.setTBColor(textColor, bgColor);
this.saveRand(textColor, bgColor);
} else if (name == 'full') {
var bgColor = localStorage.getItem('bg');
this.foolcolorVar = bgColor;
this.scrollcolorVar = bgColor;
document.getElementById('mainContent').requestFullscreen();
} else if (name == 'fav') {
var bHasScroll = this.bHasScrollbar();
this.hideScroll();
this.takeScreenshot();
if (bHasScroll)
this.showScroll();
// this.$message({
// dangerouslyUseHTMLString: true,
// message:'浏览器不支持自动添加收藏夹标签。请您使用快捷键 <strong style="color:red"><i> Ctrl+D</i> </strong>进行添加'}
// );
//this.scrollHiddenVar=scrollVar;
}
},
hideScroll() {
$("html").height($("window").height()).css({
"overflow-y": "hidden"
}); //弹出框时隐藏滚动条
$("html").css("margin-right", 17); //隐藏滚动条时防止页面偏题
},
showScroll() {
$("html").height($(window).height()).css({
"overflow-y": "auto"
}); //弹出框时隐藏滚动条
$("html").css("margin-right", 0); //隐藏滚动条时防止页面偏题
},
bHasScrollbar() {
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
},
myEventFunc(event) {
let x = event.pageX;
let rect = document.getElementById('mainContent').getBoundingClientRect();
if (x > rect.right - 50)
this.scrollHiddenVar = 'inline';
else
this.scrollHiddenVar = 'none';
},
myHandleSelect(key) {
location.href = key;
},
SpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 1000,
colspan: 1
};
} else if (1 <= rowIndex && rowIndex <= 1000) {
return {
rowspan: 0,
colspan: 0
};
}
// else if (rowIndex === 4) {
// return {
// rowspan: 2,
// colspan: 1
// };
// }
// else if (5<=rowIndex && rowIndex<=8)
// {
// return {
// rowspan: 0,
// colspan: 0
// };
// }
}
},
RowStyle({ row, column, rowIndex, columnIndex }) {
// if (rowIndex <= 3) {
// let styleJson = {
// "background": "#FAF4FF"
// };
// return styleJson
// } else if (rowIndex <= 6) {
// let styleJson = {
// "background": "#FFF7FB"
// };
// return styleJson
// } else {
// let styleJson = {
// "background": "#DFFFDF"
// };
// return styleJson
// }
let styleJson = {
"background": "rgb(255, 245, 247)"
};
return styleJson
},
getRowClass({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0)
return "background:rgb(217, 104, 49);color:#000;textAlign:center;";
},
headerStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex == 0 && columnIndex == 0) {
this.$nextTick(() => {
// 获取表头的所有单元格
let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
// 将第二列表头单元格的colSpan设为2
n[0].colSpan = 3
// 将第三列表头单元格的display设为none
n[1].style.display = 'none'
n[2].style.display = 'none'
});
}
// // 1.2 被覆盖的进行隐藏
// if (rowIndex === 0 && (columnIndex == 1 || columnIndex == 2)) {
// return {
// display: "none",
// };
// }
// row[0].colSpan=3
// row[1].colSpan=0
// row[2].colSpan=0
// if(columnIndex==2||columnIndex==1)
// return { display: "none" };
return "background:rgb(255, 245, 247);color:#000;textAlign:center; fontSize:60px;";
},
takeScreenshot() {
const node = document.getElementById('mainContent')
html2canvas(node, {
useCORS: true,
height: node.offsetHeight,
width: node.offsetWidth,
scrollY: 0,
scrollX: 0,
backgroundColor: this.bgColor,
scale: 2, // 处理模糊问题
dpi: 300, // 处理模糊问题
}).then(async (canvas) => {
let oImg = new Image();
oImg.src = canvas.toDataURL(); // 导出图片
//document.body.appendChild(oImg); // 将生成的图片添加到body
//以下代码为下载此图片功能
var triggerDownload = $("<a>").attr("href", oImg.src).attr("download", "英雄榜.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
})
}
},
created() {
console.log("beforeMount")
if ($("#youshengHeader"))
console.log("youshengHeader")
// $("#youshengHeader").load('http://gudianxiaoshuo.com/js/youshengHeader.html')
},
beforeMount() {
},
mounted() {
let tableNum = getTableNum();
switch (tableNum) {
case 1:
this.tableData1 = getTable1();
break;
case 2:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
break;
case 3:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
break;
case 4:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
break;
case 5:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
break;
case 6:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
break;
case 7:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
break;
case 8:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
break;
case 9:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
break;
case 10:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
break;
case 11:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
break;
case 12:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
break;
case 13:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
break;
case 14:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
break;
case 15:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
this.tableData15 = getTable15();
break;
case 16:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
this.tableData15 = getTable15();
this.tableData16 = getTable16();
break;
case 17:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
this.tableData15 = getTable15();
this.tableData16 = getTable16();
this.tableData17 = getTable17();
break;
case 18:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
this.tableData15 = getTable15();
this.tableData16 = getTable16();
this.tableData17 = getTable17();
this.tableData18 = getTable18();
break;
case 19:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
this.tableData15 = getTable15();
this.tableData16 = getTable16();
this.tableData17 = getTable17();
this.tableData18 = getTable18();
this.tableData19 = getTable19();
break;
case 20:
this.tableData1 = getTable1();
this.tableData2 = getTable2();
this.tableData3 = getTable3();
this.tableData4 = getTable4();
this.tableData5 = getTable5();
this.tableData6 = getTable6();
this.tableData7 = getTable7();
this.tableData8 = getTable8();
this.tableData9 = getTable9();
this.tableData10 = getTable10();
this.tableData11 = getTable11();
this.tableData12 = getTable12();
this.tableData13 = getTable13();
this.tableData14 = getTable14();
this.tableData15 = getTable15();
this.tableData16 = getTable16();
this.tableData17 = getTable17();
this.tableData18 = getTable18();
this.tableData20 = getTable20();
break;
}
var tip = localStorage.getItem('tipClosed');
if (tip)
this.showTip = false;
var bgColor = localStorage.getItem('bg');
var pColor = localStorage.getItem('pColor');
if (bgColor && pColor) {
this.textColor = pColor;
this.bgColor = bgColor;
document.querySelector('body').style.setProperty('background', bgColor);
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++)
x[i].style.color = pColor;
}
var fontArr = getAllFont();
for (i = 0; i < fontArr.length; i++) {
var fontElem = {};
fontElem.value = fontArr[i];
fontElem.label = fontArr[i];
this.options.push(fontElem);
}
let fontName = localStorage.getItem('fontName');
if (fontName) {
document.querySelector('#app').style.setProperty('font-family', fontName);
this.fontName = fontName;
}
for (i = 20; i < 100; i++) {
var fontElem = {};
fontElem.value = i;
fontElem.label = i;
this.fontSizeOptions.push(fontElem);
}
let fontSize = localStorage.getItem('fontSize');
if (fontSize) {
document.querySelector('#app').style.setProperty('font-size', fontSize)
this.fontSize = fontSize
}
window.addEventListener('mousemove', this.myEventFunc);
this.colorArr = getAllColor();
var Randbg = localStorage.getItem('Randbg');
var RandTColor = localStorage.getItem('RandTColor');
if (Randbg) {
var fontElem = {};
fontElem.name = '随机色';
fontElem.bg = Randbg;
fontElem.textcolor = RandTColor;
this.colorArr.push(fontElem);
}
let colorIndex = localStorage.getItem('corlorIndex');
console.log(colorIndex)
console.log(this.colorArr)
if (colorIndex && colorIndex < this.colorArr.length)
this.colorName = this.colorArr[colorIndex].name;
var zan = getWeixin();
if (zan)
this.zanshangUrl = zan;
else {
zan = getWeixinFromLocal();
this.zanshangUrl = zan;
}
}
})