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

1575627312(1).jpg

1575627341(1).jpg

此例为一个活动列表
html:

<ul class="act_ul clearfix" id="act_ul">
<li v-for="(item,index) in unitList" :key="item.unit_id" v-bind:class="{active:index==isUnitActive}"  @click="unitSel(index,item.unit_id,item.status,item.oid)" >
  <i></i>
  <span v-if="item.status==0" class="status status_not_begun">{{$t('course.unstarted')}}</span>
  <span v-if="item.status==1" class="status status_underway">{{$t('course.underway')}}</span>
  <span v-if="item.status==2" class="status status_finished">{{$t('course.finished')}}</span>
  <span class="act_tit">{{item.title}}</span>
  <span class="act_time"><img src="">{{item.created_at.substring(0,4)}}.{{item.created_at.substring(5,7)}}.{{item.created_at.substring(8,10)}}</span>
</li>
</ul>

动态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(){
  // 翻页要做的操作
};