L'applet WeChat implémente les fonctions de pliage et d'expansion des articles

Cet article présente principalement les fonctions de pliage et de dépliage des articles dans l'applet WeChat. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

J'ai rencontré cela pendant. faire un projet récemment. Selon les besoins, des ellipses seront affichées dans la partie pliée de la page et l'intégralité du contenu sera affichée après avoir cliqué pour développer. Code d'implémentation spécifique

Exigences

La partie pliée de la page affichera des points de suspension, et cliquez pour développer pour afficher l'intégralité du contenu

Problèmes à résoudre

• La direction du la flèche change avec l'expansion et le pliage

• Lorsque vous cliquez sur le texte de la flèche, le contenu affiché change
  

Comment le résoudre ?

• Le changement de direction de la flèche est un événement de clic bindtap, et la petite icône est modifiée après avoir cliqué

• Texte Le changement est une question d'affichage ou de masquage. Lors du pliage, il y a un problème de débordement de texte multiligne. Cinq attributs (affichage : -webkit-box, -webkit-box-orient : vertical, -webkit-line-clamp, text-overflow , overflow)

• Style de contrôle de liaison d'état et de données

Spécifique mise en œuvre

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?&#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,
  })
 }

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment le serveur du mini-programme WeChat obtient les informations décryptées par l'utilisateur

Largeur de l'image dans le mini-programme WeChat Adaptatif mise en œuvre

À propos du développement de la barre de navigation inférieure du mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!