小程序摺疊與展開文章的的實現

需求

頁面摺疊超出的的部分顯示省略號，點擊展開後顯示所有內容

---

須要解決的問題

• 箭頭隨展開摺疊後箭頭方向的變化
• 當點擊箭頭文本顯示內容的變化

---

如何解決？

1. 箭頭方向的變化是一個點擊事件bindtap,點擊後更換小圖標；
2. 文本變化是一個show或者hide的事情，摺疊的時候有個多行文本溢出得問題五個屬性（display: -webkit-box，-webkit-box-orient: vertical， -webkit-line-clamp，text-overflow，overflow）
3. 狀態與數據綁定控制樣式

---

具體實現

wxml

<view class="company-detail">
        <view class="company-detail-content">
            <view class="weui-loadmore weui-loadmore_line">
                <view class="weui-loadmore__tips weui-loadmore__tips_in-line">公司介紹</view>
            </view>
            <view class="long-dec {{isFold?'hide':'show'}}">
                <text class="first-dec">
                    創業是個失敗機率很大的事情，咱們很高興從2012底到如今還活着， 並且還活的很不錯。 目前有贊旗下的產品有：有贊微商城、有贊收銀、有贊零售、有讚美業、有贊批發、有贊買家版、有贊微小店.
                </text>
                <text class="second-dec">
                    咱們認爲，相比較業務來講，團隊纔是公司的核心。有贊沒有「員工」只有「小夥伴」，也沒有人姓「公」名「司」，咱們有一羣聰明、有要性、又皮實的夥伴，這纔是咱們最大的資產。
                </text>
                <text class="last-dec">
                    有讚的小夥伴目前已超過1000人，工程師比例佔55%，咱們有很濃的工程師氛圍，每週都有不少的有意思的分享：有出國旅遊的分享、有如何搭訕的分享、有如何裝修房子的分享...技術分享更是數不勝數。 咱們的工做不是很輕鬆，但咱們的氛圍很輕鬆，很open，公司裏隨處可見騎着獨輪車來回跑的工程師、懶人沙發、午睡弔籃、復古電話亭等等，每月都有節日、新人表演、拓展、派對等，對咱們來講，每天均可以是節日。咱們倡導簡單直接的溝通方式，但願作一家通透的公司。這裏並無過多的等級劃分，你能夠隨時提出本身的意見和任何人PK。福利方面咱們全額繳納五險一金，每個月980元的有贊E卡鼓勵你們一塊兒吃喝玩樂。工程師標配MacBookPro、大屏顯示器和機械鍵盤。辦公室裏常備零食、水果，休息區有電視、遊戲機、桌球、乒乓球、四驅賽車、桌遊隨時供你們放鬆減壓。天天晚下班的打車費報銷，每一年給你和你的家人提供旅遊和體檢等等。
                </text>
            </view>
            <image class="arrow" src=" {{isFold?'../../youzan-image/down.png':'../../youzan-image/up.png'}}" bindtap="showAll"></image>
        </view>
    </view>

---

wxss

.long-dec{
    padding-left: 20rpx;
    margin-top: -87rpx;
    display: -webkit-box;/*關鍵屬性*/
    font-size:28rpx;
    color:#cfcfd0;
    line-height: 40rpx;
    word-break: break-all;
    -webkit-box-orient: vertical;/* 關鍵屬性 */
    -webkit-line-clamp:6;/* 關鍵屬性 */
    overflow: hidden;/* 關鍵屬性 */
    text-overflow:ellipsis;/* 超出內容顯示省略號*/
}
.hide{
  display: -webkit-box;
}
.show{
  display: block;
}
.arrow{
  position: absolute;
  width: 40rpx;
  height: 43rpx;
  left: 50%;
  transform: translate(-50%);
}

---

js

Page({
  data: {
    isFold: true,
  },
showAll: function (e) {
    this.setData({
      isFold: !this.data.isFold,
    })
  }