有時候，介面文字可能會很多，我們一開始設計介面的時候一定希望讓他展示出來幾行就行了，如果使用者需要檢視隱藏的部分，點選展開詳情就能把剩餘的內容顯示出來。

方法可能有些不好，但是實現功能了，有更好的方法可以一起交流哦

配圖解釋

設計樣式：

展開樣式

test.wxml

<view class='writ' wx:for="{{writ}}">//從js裡面引入資料
  <view class='{{className}}'>//從js哪裡獲取類名，這裡可以獲取兩個類名，一個控制的展開樣式，一個控制的還原樣式
    <text>
   		 {{item.text}}
    </text>
  </view>
  
</view>
<view class='open '>
    <text bindtap='onopen'>展開詳情>></text>//繫結點選事件，用於切換不同樣式（也就是切換不同類名）
  </view>
 

text.js

 /**
   * 頁面的初始資料
   */
  data: {
    writ: [
      { text: "世界頂級的煙火秀，無敵熱帶海景，再配上三亞國際音樂節的頂級內容，恢弘絢麗的舞美特效，再2019年的跨年，帶著世界頂級的煙火秀，無敵熱帶海景，再配上三亞國際音樂節的頂級內容世界頂級的煙火秀，無敵熱帶海景，再配上三亞國際音樂節的頂級內容nihaoa" },
    ],
    className: 'wr-bottom',//沒有點選之前就給text.wxml頁面這個控制還原的類名
    clickBtn: true
    },
 /**
 * 展開詳情按鈕控制
 */
  onopen: function (options){
    if (this.data.clickBtn){//第一次點選獲取上面 clickBtn定義好的 true，給className賦值，這個樣式控制的是開啟的樣式
      this.setData({
        className: 'openwr-bottom',
        clickBtn: false//從新賦值，再次點選就會執行else裡面的內容了
      })
    }else{
      this.setData({
        className: 'wr-bottom',
         clickBtn: true//執行過else的內容再次從新賦值，再次點選就會執行if裡面的內容了
      })
    }
},
 

text.wxss

/* 控制點選還原的樣式 */
.wr-bottom{
width:640rpx;
height:160rpx;
text-align:center;
margin-left:50rpx;
line-height:50rpx;
margin-top:-30rpx;
overflow: hidden;

}
/* 點選展開的樣式 */
.openwr-bottom{
width:640rpx;
height:auto;
text-align:center;
margin-left:50rpx;
line-height:50rpx;
margin-top:-30rpx;
}
/* 控制展開詳情的樣式 */
.open{
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 15rpx solid #e6e6e6;
}
}