影片直播APP原始碼，透過css控制div內容展開更多/收起效果

影片直播APP原始碼，透過css控制div內容展開更多/收起效果

一. 實現思路

1. 需要設定一個變數控制展開 / 收起效果

2. 提前寫好最高高度的class樣式，超出這個高度多餘內容會隱藏

3. 只有在列表資料長度大於3的時候，才會顯示展開 / 收起按鈕

二. 程式碼實現

 

<!-- 透過變數控制class樣式 -->
 <view :class="isHide ? 'maxHeight' : ''">
   <view v-for="(item, index) in addressList" :key="index" class="itemAddress">
     <view class="userInfo">
       <text class="username">{{ item.username}}</text>
       <u--text format="encrypt" mode="phone" :text="item.phone"></u--text>
     </view>
   </view>
    <view class="address u-line-1">{{ item.address }}</view>
 </view>
  <!-- 注意 按鈕div和地址列表div同一個層級-->
 <!-- 大於3條顯示控制按鈕，透過變數控制按鈕文字 -->
 <view v-if="addressList.length > 3" class="moreCon" @click="getMoreAddress">
    <text class="txt">{{ isHide ? '展示更多' : '收起全部' }}地址 </text>
     <!--控制圖示 -->
    <u-icon v-if="isHide" name="arrow-down" color="#333" size="11"></u-icon>
    <u-icon v-else name="arrow-up" color="#333" size="11"></u-icon>
 </view>
 
 <script>
 export default {
  data() {
    return {
      isHide: true, //初始值為true，顯示為摺疊畫面
      addressList: [],
    }
  },
  methods:{
   getMoreAddress() {
      this.isHide = !this.isHide
    },
  }
}
 </script>
 
 /* 透過高度控制內容的展示隱藏*/
 .maxHeight {
    height: auto;
    max-height: 400upx;
    overflow: hidden;
  }

以上就是 影片直播APP原始碼，透過css控制div內容展開更多/收起效果，更多內容歡迎關注之後的文章