WeChat 애플릿은 기사 접기 및 확장 기능을 구현합니다.

이 글은 주로 WeChat 애플릿의 기사 접기 및 펼치기 기능을 소개합니다. 이제는 도움이 필요한 친구들이 참고할 수 있도록 공유합니다. 페이지 접기 초과 해당 부분에 줄임표가 표시되며, 클릭하면 전체 내용이 표시됩니다. 구체적인 구현 코드

요구 사항페이지 접기 부분 너머에는 줄임표가 표시됩니다. 클릭하면 전체 내용이 표시됩니다.

해결해야 할 문제

화살표가 확장 및 축소됩니다 화살표 방향 변경
화살표 텍스트를 클릭하면 표시되는 내용이 변경됩니다

• 
  

어떻게 해결하나요?

화살표 방향의 변화는 클릭 이벤트 바인드탭이며 클릭 후 작은 아이콘이 변경됩니다.
텍스트 변경은 표시 또는 숨기기이며 5가지 문제가 있습니다. 접을 때 여러 줄 텍스트 오버플로 속성(표시: -webkit-box, -webkit-box-orient: 수직, -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?&#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,
  })
 }

위 내용은 이 글의 전체 내용입니다. 여러분의 공부에 도움이 되는 더 많은 관련 컨텐츠를 PHP 중국어 사이트에 주목해주세요!

관련 권장 사항:

WeChat 미니 프로그램 서버가 사용자의 암호 해독된 정보를 얻는 방법

WeChat 미니 프로그램에서 이미지 너비 적응 구현

WeChat 미니 프로그램의 하단 탐색 모음 개발 정보

위 내용은 WeChat 애플릿은 기사 접기 및 확장 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!