效果图(同时仅可选一项,悬浮后一样的效果)
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(){
// 翻页要做的操作
};
