[vue]动态添加class及删除同级class+滚动翻页

效果图(同时仅可选一项,悬浮后一样的效果)

1575627312(1).jpg

1575627341(1).jpg

此例为一个活动列表
html:

  
  {{$t('course.unstarted')}}
  {{$t('course.underway')}}
  {{$t('course.finished')}}
  {{item.title}}
  {{item.created_at.substring(0,4)}}.{{item.created_at.substring(5,7)}}.{{item.created_at.substring(8,10)}}

动态class js:

// 切换选中的活动 .isUnitActive = -1时为未选择任何
unitSel(index,unit_id,status,oid){
  this.teacherBtnIs = false;
  this.inCourse = false;
  // 当前选中的活动
  if(this.isUnitActive == index){
    this.isUnitActive = -1;
  }else{
    this.isUnitActive = index;
    this.unitId = unit_id;
    this.oid = oid;
    if(status == 0)this.teacherBtnIs = true;
    if(status == 1)this.inCourse = true;
  }
}

翻页js :

var that = this;
document.getElementById('act_ul').onscroll = function(){
  // 翻页要做的操作
};