快捷導(dǎo)航

小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例

更新時(shí)間：2018年09月22日 10:18:32 作者：Ewall_

這篇文章主要介紹了小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言：本章說(shuō)下文字內(nèi)容的展開(kāi)與收起的實(shí)現(xiàn)，要實(shí)現(xiàn)這么一個(gè)效果：當(dāng)收起的時(shí)候隱藏并顯示省略號(hào)，當(dāng)展開(kāi)的時(shí)候顯示全部文字。

GitHub：https://github.com/Ewall1106/miniProgramDemo

先看下效果圖：

小程序 — 展開(kāi)/收起

1、結(jié)構(gòu)樣式

（1）首先我們定義一下html結(jié)構(gòu)：

<view class="container">
 <view class="title">
  <text class="title_txt">標(biāo)題標(biāo)題</text>
  <image class="title_icon" src="/assets/images/arrow_up.png" />
 </view>
 <view class="content"> 
  我所有的自負(fù)皆來(lái)自我的自卑，所有的英雄氣概都來(lái)自于我的軟弱。嘴里振振有詞是因?yàn)樾睦餄M是懷疑，深情是因?yàn)橥春拮约簾o(wú)情。這世界沒(méi)有一件事情是虛空而生的，站在光里，背后就會(huì)有陰影，這深夜里一片寂靜，是因?yàn)槟氵€沒(méi)有聽(tīng)見(jiàn)聲音。
 </view>
</view>

內(nèi)容摘抄至馬良《告坦白書(shū)》中我一段喜歡的文字。

（2）less樣式：

標(biāo)題 title 就是一個(gè)簡(jiǎn)單的flex布局；內(nèi)容 content 中的文字我們默認(rèn)收起狀態(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）這樣我們就實(shí)現(xiàn)了一個(gè)默認(rèn)布局樣式

收起狀態(tài)

2、添加點(diǎn)擊事件

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

data = {
 isShow: false
};

（2）在箭頭icon上添加一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊的時(shí)候?qū)?isShow 做取反操作；

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

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

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

<image class="title_icon" src="{{isShow ? '/assets/images/arrow_down.png' : '/assets/images/arrow_up.png'}}" @tap="toggle" />

（2）然后我們定義一個(gè)展開(kāi)的樣式，根據(jù)isShow的狀態(tài)值動(dòng)態(tài)的切換樣式

<view class="content {{isShow ? 'on' : ''}}">
 我所有的自負(fù)皆來(lái)自我的自卑，所有的英雄氣概都來(lái)自于我的軟弱。嘴里振振有詞是因?yàn)樾睦餄M是懷疑，深情是因?yàn)橥春拮约簾o(wú)情。這世界沒(méi)有一件事情是虛空而生的，站在光里，背后就會(huì)有陰影，這深夜里一片寂靜，是因?yàn)槟氵€沒(méi)有聽(tīng)見(jiàn)聲音。
</view>

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

4、小結(jié)

這樣我們就實(shí)現(xiàn)了文本框的展開(kāi)/收起效果，當(dāng)收起的時(shí)候顯示省略號(hào)并隱藏，當(dāng)展開(kāi)的時(shí)候展示全部文字。

當(dāng)然，不僅僅是文字的收起與展開(kāi)，里面放其它的內(nèi)容也是可以的，根據(jù)需求來(lái)應(yīng)對(duì)了；還有就是可以加個(gè)動(dòng)畫之類的完善一下交互效果，感興趣的朋友可以自己鼓搗。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: