91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序實現折疊與展開文章功能

發布時間:2020-10-05 06:00:55 來源:腳本之家 閱讀:641 作者:kerin 欄目:web開發

需求

頁面折疊超出的的部分顯示省略號,點擊展開后顯示全部內容

微信小程序實現折疊與展開文章功能

需要解決的問題

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

如何解決?

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

具體實現

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,
  })
 }

總結

以上所述是小編給大家介紹的微信小程序折疊與展開文章的實現代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

SHOW| 平武县| 永登县| 绵竹市| 桃源县| 崇明县| 财经| 枣阳市| 河曲县| 华宁县| 新郑市| 清涧县| 四子王旗| 盱眙县| 黎平县| 乳源| 江城| 云和县| 大余县| 双桥区| 盐池县| 睢宁县| 永定县| 江永县| 嘉兴市| 凤台县| 青浦区| 托里县| 普兰县| 郯城县| 高碑店市| 鞍山市| 西乡县| 蒲城县| 丰城市| 西乌珠穆沁旗| 辛集市| 隆昌县| 延安市| 靖安县| 石渠县|