视频直播APP源码，通过css控制div内容展开更多/收起效果

视频直播APP源码，通过css控制div内容展开更多/收起效果

一. 实现思路

1. 需要设置一个变量控制展开 / 收起效果

2. 提前写好最高高度的class样式，超出这个高度多余内容会隐藏

3. 只有在列表数据长度大于3的时候，才会显示展开 / 收起按钮

 

二. 代码实现

 

1

<!-- 通过变量控制class样式 --><br> <view :class="isHide ? 'maxHeight' : ''"><br>   <view v-for="(item, index) in addressList" :key="index" class="itemAddress"><br>     <view class="userInfo"><br>       <text class="username">{{ item.username}}</text><br>       <u--text format="encrypt" mode="phone" :text="item.phone"></u--text><br>     </view><br>   </view><br>    <view class="address u-line-1">{{ item.address }}</view><br> </view><br>  <!-- 注意 按钮div和地址列表div同一个层级--><br> <!-- 大于3条显示控制按钮，通过变量控制按钮文字 --><br> <view v-if="addressList.length > 3" class="moreCon" @click="getMoreAddress"><br>    <text class="txt">{{ isHide ? '展示更多' : '收起全部' }}地址 </text><br>     <!--控制图标 --><br>    <u-icon v-if="isHide" name="arrow-down" color="#333" size="11"></u-icon><br>    <u-icon v-else name="arrow-up" color="#333" size="11"></u-icon><br> </view><br> <br> <script><br> export default {<br>  data() {<br>    return {<br>      isHide: true, //初始值为true，显示为折叠画面<br>      addressList: [],<br>    }<br>  },<br>  methods:{<br>   getMoreAddress() {<br>      this.isHide = !this.isHide<br>    },<br>  }<br>}<br> </script><br> <br> /* 通过高度控制内容的展示隐藏*/<br> .maxHeight {<br>    height: auto;<br>    max-height: 400upx;<br>    overflow: hidden;<br>  }

​

以上就是 视频直播APP源码，通过css控制div内容展开更多/收起效果，更多内容欢迎关注之后的文章