小程序 列表超出範圍可展開收起功能

因爲設計項目的頁面，一個列表裏面文字太過於長，也影響頁面美觀，因此很多軟件都有展開收起這個小功能。

　　1.文本超出設置行數後隱藏，而後顯示省略號...

　　2.可點擊展開看隱藏的文本內容，也能夠收起。

　　如圖：

　　

 

　　wxml

　　

<scroll-view class='page'>
  <!-- 列表 -->
  <view class='list' wx:for='{{DataSource}}' wx:key="index">
    <!-- 內容 start-->
    <view class="user-content-view {{item.isF?'hide':'show'}}">
      <text class="user-content">{{item.content}}</text>
    </view>
      <!-- 內容 end-->

    <!-- 展開 收起 strat-->
    <view bindtap="change" class="state" data-index="{{index}}">{{item.isF?'展開':'收起'}}</view>
    <!-- 展開 收起  end -->
  </view>

</scroll-view>

　　wxss

.page{
  margin-top: 50rpx;
}


/* 列表 */
.list{
  background: white;
  margin-bottom: 1px;
   border-bottom: 1px solid whitesmoke;
  /* border-top: 1px solid whitesmoke;  */
}
.user-content-view{
  text-align: center;
  display: -webkit-box;  /*關鍵屬性（必須有的）  */
  -webkit-box-orient: vertical;   /*規定子元素的排列方向 */
  -webkit-line-clamp:3; /*行數*/
  /* 實現多餘的文字隱藏並用省略號來表明被隱藏的文字    */
  overflow: hidden;
  text-overflow:ellipsis; 
  
}
.user-content{
  /* display: flex; */
  font-size: 18px;
  /* line-height: 50rpx;
  margin-left: 10rpx;
 */
}

/* 展開 收起 */
.state{
  width: 96%;
  text-align: right;
  color: rgb(88, 103, 138);
  margin: 10rpx 0rpx; 
  font-size: 35rpx;
  font-weight: bold;
}

.hide{
  display: -webkit-box;
}

.show{
  display: block
} 

 　js

　　我把展開收起的狀態放到數組裏面，按道路能夠不用放在數組裏面的，這樣不靈活使用。

// pages/CircleFriends/CircleFriends.js
var app = getApp()
var that

Page({
  /**
   * 頁面的初始數據
   */
  data: {

    DataSource: [
      {
        isF: true,
        content: '掌握HTML是網頁的核心，是一種製做萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不一樣計算機之間信息交流的障礙。所以，它是目前網絡上應用最爲普遍的語言，也是構成網頁文檔的主要語言，學好HTML是成爲Web開發人員的基本條件。HTML是一種標記語言，可以實現Web頁面並在瀏覽器中顯示。HTML5做爲HTML的最新版本，引入了多項新技術，大大加強了對於應用的支持能力，使得Web技術再也不侷限於呈現網頁內容。',
      },
      {
        isF: true,
        content: '前端開發是建立Web頁面或app等前端界面呈現給用戶的過程。前端開發經過HTML，CSS及JavaScript以及衍生出來的各類技術、框架、解決方案，來實現互聯網產品的用戶界面交互 [1]  。它從網頁製做演變而來，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製做是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字爲主，用戶使用網站的行爲也以瀏覽爲主。隨着互聯網技術的發展和HTML五、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更增強大。',
      }
    ],
  },



  //展開  收起
  change: function (e) {
    var that = this;
    var DataSource = that.data.DataSource;
    var row = DataSource[e.currentTarget.dataset.index];
    console.log("**********:" + row)
    row.isF = !row.isF;
    that.setData({
      DataSource: DataSource,
    })
  },

})