「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
前言
21天可以养成好习惯，都三次21天了，我必须得承认我还没养成记录总结的习惯O.O。但是，咱还年轻，慢慢来吧！先总结一个开发中遇到的场景，关键词如下 Vue ul li v-for 展开 收起 。
需求介绍
页面需要展示一个列表，支持滑动和下拉刷新，列表数据是通过后端接口返回的。每一个列表项都可以分为两部分，常显的几个值和通过展开收起显示的几个值。
技术方案
要点一：滑动
可以用div的overflow属性
内容超出宽高会出现滚动条：
<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">
</div>
滚动条常显：
<div style="height:300px;width:70px;overflow:scroll;background:#EEEEEE;">
使用swiper
swiper官网 因为要考虑列表的下拉刷新，需要在列表滑动后调用初始化列表的方法，所以在项目中使用了swiper。
要点二：展开收起
使用this.$refs获取dom结构
<li ref="liList">
<div>XXXXXXXX常显内容XXXXXXXX</div>
<div>通过展开收起按钮控制的内容</div>
</li>
show(index){
let zksq = this.$refs.liList.[index].childeNode[1]//获取到展开收起控制的div节点
// 用if-else控制
zksq.style.display = block
// zksq.style.display = none
}
使用显示隐藏
在后端接口返回的数组中，给每一个列表项增加一对key-value,定义为布尔类型；
<li ref="liList" v-if="showDiv">
<div>XXXXXXXX常显内容XXXXXXXX</div>
<div>通过展开收起按钮控制的内容</div>
</li>
show(index){
this.showDiv = !this.showDiv
}
最终在项目中选择的是显示隐藏的方法，其中li内容可以被自动撑开，但是最外层的swiper需要每次展开或收起后重新计算高度。不然如果所有的列表项全部展开，最后一个会被底部遮盖，导致无法展开收起的缺陷存在。
show(index){
this.showDiv = !this.showDiv
this.$nextTick(()=>{
this.$refs.myswiper.swiper.update()//这个方法可以参考官网的。
})
}
this.$nextTick()方法的使用场景这就是一个很好的例子，当你想要得到dom被修改之后的样子时，它就很好用！
总结
这个小问题卡了很久，原因在于对各种元素的属性不够熟悉，导致运用时不够灵活。虽然现在还是有一些属性讲不清楚，但是也是一次经验积累。分享给大家，同时也加深印象。下次再遇到，一定会更优~
