本篇文章給大家分享的是有關怎么在小程序中實現展開/收起效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯成立與2013年，先為崇義等服務建站，崇義等地企業(yè)，進行企業(yè)商務咨詢服務。為崇義企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

1、結構樣式

（1）首先我們定義一下html結構：

 
  標題標題
  
 
  
  我所有的自負皆來自我的自卑，所有的英雄氣概都來自于我的軟弱。嘴里振振有詞是因為心里滿是懷疑，深情是因為痛恨自己無情。這世界沒有一件事情是虛空而生的，站在光里，背后就會有陰影，這深夜里一片寂靜，是因為你還沒有聽見聲音。
 

內容摘抄至馬良《告坦白書》中我一段喜歡的文字。

（2）less樣式：

標題 title 就是一個簡單的flex布局； 內容 content 中的文字我們默認收起狀態(tài)且只展示兩行

.container {
 .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx;
  .title_txt {
   font-size: 34rpx;
   color: #2b2b2b;
  }
  .title_icon {
   display: block;
   width: 21rpx;
   height: 11rpx;
  }
 }
 .content {
  height: 80rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: -o-ellipsis-lastline;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 25rpx;
  font-size: 30rpx;
  color: #888888;
 }
}

（3）這樣我們就實現了一個默認布局樣式

收起狀態(tài)

2、添加點擊事件

（1）首先我們應該在 data 中定義一個變量 isShow 用來控制樣式的切換，默認為收起狀態(tài)（即不展示）。

data = {
 isShow: false
};

（2）在箭頭icon上添加一個點擊事件，當點擊的時候對 isShow 做取反操作；

toggle() {
 this.isShow = !this.isShow;
 this.$apply();
}

3、樣式動態(tài)切換

（1）首先是image箭頭圖片的切換（注意是如何動態(tài)的切換本地圖片的）

（2）然后我們定義一個展開的樣式，根據isShow的狀態(tài)值動態(tài)的切換樣式

 我所有的自負皆來自我的自卑，所有的英雄氣概都來自于我的軟弱。嘴里振振有詞是因為心里滿是懷疑，深情是因為痛恨自己無情。這世界沒有一件事情是虛空而生的，站在光里，背后就會有陰影，這深夜里一片寂靜，是因為你還沒有聽見聲音。


.content.on {
 display: block;
 text-overflow: clip;
 overflow: visible;
}

以上就是怎么在小程序中實現展開/收起效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯行業(yè)資訊頻道。