這篇文章主要介紹了微信小程序中實現(xiàn)折疊與展開文章功能的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鄂城網(wǎng)站建設(shè)、鄂城做網(wǎng)站、鄂城網(wǎng)站設(shè)計、鄂城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鄂城企業(yè)網(wǎng)站模板建站服務(wù)，十余年鄂城做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

具體實現(xiàn)代碼

需求

頁面折疊超出的的部分顯示省略號，點擊展開后顯示全部內(nèi)容

需要解決的問題

• 箭頭隨展開折疊后箭頭方向的變化

• 當(dāng)點擊箭頭文本顯示內(nèi)容的變化

如何解決？

• 箭頭方向的變化是一個點擊事件bindtap,點擊后更換小圖標(biāo)；

• 文本變化是一個show或者h(yuǎn)ide的事情，折疊的時候有個多行文本溢出得問題五個屬性（display: -webkit-box，-webkit-box-orient: vertical， -webkit-line-clamp，text-overflow，overflow）

• 狀態(tài)與數(shù)據(jù)綁定控制樣式

具體實現(xiàn)

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">
          創(chuàng)業(yè)是個失敗概率很大的事情，我們很高興從2012底到現(xiàn)在還活著， 而且還活的很不錯。 目前有贊旗下的產(chǎn)品有：有贊微商城、有贊收銀、有贊零售、有贊美業(yè)、有贊批發(fā)、有贊買家版、有贊微小店.
        </text>
        <text class="second-dec">
          我們認(rèn)為，相比較業(yè)務(wù)來說，團(tuán)隊才是公司的核心。有贊沒有“員工”只有“小伙伴”，也沒有人姓“公”名“司”，我們有一群聰明、有要性、又皮實的伙伴，這才是我們最大的資產(chǎn)。
        </text>
        <text class="last-dec">
          有贊的小伙伴目前已超過1000人，工程師比例占55%，我們有很濃的工程師氛圍，每周都有很多的有意思的分享：有出國旅游的分享、有如何搭訕的分享、有如何裝修房子的分享...技術(shù)分享更是數(shù)不勝數(shù)。 我們的工作不是很輕松，但我們的氛圍很輕松，很open，公司里隨處可見騎著獨輪車來回跑的工程師、懶人沙發(fā)、午睡吊籃、復(fù)古電話亭等等，每個月都有節(jié)日、新人表演、拓展、派對等，對我們來說，天天都可以是節(jié)日。我們倡導(dǎo)簡單直接的溝通方式，希望做一家通透的公司。這里并沒有過多的等級劃分，你可以隨時提出自己的意見和任何人PK。福利方面我們?nèi)~繳納五險一金，每月980元的有贊E卡鼓勵大家一起吃喝玩樂。工程師標(biāo)配MacBookPro、大屏顯示器和機械鍵盤。辦公室里常備零食、水果，休息區(qū)有電視、游戲機、桌球、乒乓球、四驅(qū)賽車、桌游隨時供大家放松減壓。每天晚下班的打車費報銷，每年給你和你的家人提供旅游和體檢等等。
        </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;/*關(guān)鍵屬性*/
  font-size:28rpx;
  color:#cfcfd0;
  line-height: 40rpx;
  word-break: break-all;
  -webkit-box-orient: vertical;/* 關(guān)鍵屬性 */
  -webkit-line-clamp:6;/* 關(guān)鍵屬性 */
  overflow: hidden;/* 關(guān)鍵屬性 */
  text-overflow:ellipsis;/* 超出內(nèi)容顯示省略號*/
}
.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,
  })
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序中實現(xiàn)折疊與展開文章功能的示例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章名稱：微信小程序中實現(xiàn)折疊與展開文章功能的示例
本文路徑：http://chinadenli.net/article12/ppggdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、網(wǎng)站營銷、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)