Vue项目中实现手动翻页效果

先看效果：

 再上代码：

结构部分（因为需求和样式不一致，需要自己自定义，这里只给一个参考）：

 逻辑代码（主体部分）

  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();
            }
        }
    }