picSrc: require(‘…/assets/images/ET-NBAC-II.png’),
picWidth: ‘80px’
},
{
ProductName: ‘ET-TSC++’,
Description: ‘ET-TSC++超快速电容器综合模块,具有速度快、容量大、寿命长…’,
picSrc: require(‘…/assets/images/ET-TSC++.png’),
picWidth: ‘80px’
},
{
ProductName: ‘ET-D(S)VS’,
Description: ‘末端电压稳定装置是一种跟踪末端线路电压变化、自…’,
picSrc: require(‘…/assets/images/ET-D(S)VS.png’),
picWidth: ‘80px’
},
{
ProductName: ‘在线监测系统’,
Description: ‘电能质量在线监测系统是面向对象的大型电能质量在线监测与管理系统。…’,
picSrc: require(‘…/assets/images/在线监测系统.png’),
picWidth: ‘80px’
},
{
ProductName: ‘PQ2000’,
Description: ‘PQ2000电能质量分析仪是北斗易通结合我国电力系统的特点,采用…’,
picSrc: require(‘…/assets/images/PQME2000.png’),
picWidth: ‘80px’
},
{
ProductName: ‘PQME2000系列’,
Description: ‘PQME2000系列是北斗易通公司严格按照国家颁布的相关技术标准…’,
picSrc: require(‘…/assets/images/PQME2000系列.png’),
picWidth: ‘80px’
}
]
}
},
mounted () {
let len = this.productList.length % 4
// 根据产品数组长度除以4的余数,来给数组末尾加入几个空的object
switch (len) {
case 0:
break
case 1:
for (let i = 0; i < 3; i++) {
this.productList.push(
{
ProductName: ‘’,
Description: ‘’,
picSrc: ‘’,
picWidth: ‘0’
}
)
}
break
case 2:
for (let i = 0; i < 2; i++) {
this.productList.push(
{
ProductName: ‘’,
Description: ‘’,
picSrc: ‘’,
picWidth: ‘0’
}
)
}
break
case 3:
this.productList.push(
{
ProductName: ‘’,
Description: ‘’,
picSrc: ‘’,
picWidth: ‘0’
}
)
break
default:
break
}
// 取数组前4个元素,加入到数组末尾去,便于轮播
let productListFrontFourthObject = this.productList.slice(0, 4)
for (let i = 0; i < productListFrontFourthObject.length; i++) {
this.productList.push(productListFrontFourthObject[i])
}
// 设置定时,开始轮播
let _this = this
setTimeout(function () {
_this.changeLeftVal()
}, 3000)
},
methods: {
// 移动面板mobilePanel left属性变化函数
changeLeftVal () {
// 变化前移动面板的left属性值
let beforeLeftVal = parseInt(document.querySelector(‘.mobilePanel’).style.left)
// 变化后移动面板的left属性值
let afterLeftVal = beforeLeftVal - 1080
// 给左移添加动画
this.animate(beforeLeftVal, afterLeftVal)
},
// 动画效果
animate (beforeLeftVal, afterLeftVal) {
let _this = this
var interval
// 设置定时器,这里设置10ms移动108px,即100ms移动1080px,也就是说动画效果时间为100ms
interval = setInterval(function () {
beforeLeftVal -= 108 // left值减108
document.querySelector(‘.mobilePanel’).style.left = beforeLeftVal + ‘px’ // 渲染到DOM中
// 如果beforeLeftVal值已经变化到 等于我们需要的值时
if (beforeLeftVal === afterLeftVal) {
// 清初定时器
clearInterval(interval)
// 当beforeLeftVal值等于 -1080 × (产品数组长度/4 - 1),将移动面板的left值归零
if (beforeLeftVal === -1080 * (_this.productList.length / 4 - 1)) {
document.querySelector(‘.mobilePanel’).style.left = 0
}
// 继续改变移动面板left值
setTimeout(function () {
_this.changeLeftVal()
}, 3000)
}
}, 10)
ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?