Das WeChat-Applet implementiert Funktionen zum Falten und Erweitern von Artikeln

Dieser Artikel stellt hauptsächlich die Funktionen zum Falten und Entfalten von Artikeln im WeChat-Applet vor. Jetzt kann ich ihn mit Ihnen teilen.

Ich bin kürzlich auf diese Situation gestoßen Arbeiten an einem Projekt Je nach Anforderung werden im gefalteten Teil der Seite Auslassungspunkte angezeigt und nach dem Klicken zum Erweitern wird der gesamte Inhalt angezeigt. Spezifischer Implementierungscode

Anforderungen

Im gefalteten Teil der Seite werden Auslassungspunkte angezeigt. Klicken Sie zum Erweitern darauf, um den gesamten Inhalt anzuzeigen

Probleme, die gelöst werden müssen

• Die Richtung der Pfeil ändert sich beim Erweitern und Falten

• Wenn auf den Pfeiltext geklickt wird, ändert sich der angezeigte Inhalt
  

Wie kann man es lösen?

• Die Änderung der Pfeilrichtung ist ein Klickereignis-Bindtap, und das kleine Symbol ändert sich nach dem Klicken;

Text Die Änderung ist eine Frage des Ein- oder Ausblendens. Beim Falten besteht das Problem eines mehrzeiligen Textüberlaufs (Anzeige: -webkit-box, -webkit-box-orient: vertikal, -webkit-line-clamp, text-overflow , overflow)
Status- und Datenbindungskontrollstil

Spezifisch Implementierungwxml

  <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?&#39;hide&#39;:&#39;show&#39;}}">
        <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?&#39;../../youzan-image/down.png&#39;:&#39;../../youzan-image/up.png&#39;}}" 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,
  })
 }

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Wie der WeChat-Miniprogrammserver entschlüsselte Benutzerinformationen erhält

Bildbreite im WeChat-Miniprogramm Adaptive Implementierung

Über die Entwicklung der unteren Navigationsleiste des WeChat-Miniprogramms

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert Funktionen zum Falten und Erweitern von Artikeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!