Vue:列表展开和收起(超过必定行数时显示‘查看更多’按钮)

前言:前端小白记录的一些小功能~javascript

  公司开发中的小程序中有作任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了能够开始了,说多了就烦了css

1.首先是css样式,由于设计稿上是超过两行默认隐藏内容因此须要写if判断,代码以下:前端

<ul>
  <li class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx"  v-if="idx < 2">
    <p class="title">{{item.name}}<img src="../../../assets/coin.png"/><span>+{{item.score}}猩淘币</span></p>
    <p class="describe">{{item.desc}}</p>
  </li>
  <li class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx"  v-show="showMissionList2" v-if="idx >= 2">
    <p class="title">{{item.name}}<img src="../../../assets/coin.png"/><span>+{{item.score}}猩淘币</span></p>
    <p class="describe">{{item.desc}}</p>
  </li>
  <--收起和展开按钮-->
  <div class="shrink" v-if="bodyData.daily.length > 2" @click='toggle(2)'>
    <span class="line"></span>
    {{showMissionList2 ? '收起': '查看更多'}}
    <i class="iconfont icon-return" :class="showMissionList2 ? '' : 'down'"></i>
    <span class="line"></span>
  </div>
</ul>

2.其次是js,由于我这里有两个列表要显示,因此toggle方法要用id进行区分,代码以下:java

data( ){
 return{
  name : ' 任务中心 '
  bodyData: {
   new : [],
   daily : []
  },
  showMissionList1 : false,//新手任务列表展开收起开关
  showMissionList2 : false,//平常任务列表展开收起开关
 }
},
methods:{
 /*
 * 展开和收起任务列表
 * 传一个参数id便于区分个人两个任务列表点击事件
 */
 toggle (id) {
  if (id === 1)  {
   this.showMissionList1 = ! this.showMissionList1
  } else {
   this.showMissionList2 = ! this.showMissionList2
  }
 }
} 

接下来贴一张效果图~小程序

相关文章
相关标签/搜索