先看效果:
再上代码:
结构部分(因为需求和样式不一致,需要自己自定义,这里只给一个参考):
逻辑代码(主体部分)
data() {
return {
SJ: '',
list: [],
cur: 0 //当前选中的一组li
};
}
methods:{
// 页面滑动
slide(val) {
// 设置滑动距离为ul整体宽度
let w = 458;
let slideBox = () => {
// 设置当前选中的ul对象,默认为0
let cur = this.cur;
for (let i = 0; i < this.list.length; i++) {
// 滑动距离是相对固定的
this.$refs.ulList[i].style.transform = `translate(-${
w * cur
}px, 0)`;
this.$refs.ulList[i].style.transition = 'all 0.4s';
// 设置下方小圆点变动:先统一所有的样式
this.$refs.liList[i].style.width = '4px';
// 再单独给自己设置样式(循环排他)
this.$refs.liList[cur].style.width = '10px';
this.$refs.liList[cur].style.transition = 'all 0.4s';
}
};
if (val == 'prev') {
// 滚动距离不能小于数组最小值
if (this.cur == 0) return false;
this.cur--;
slideBox();
} else {
//滚动距离不能超过数组最大值
if (this.cur >= this.list.length - 1) return false;
this.cur++;
slideBox();
}
}
}