집 >위챗 애플릿 >미니 프로그램 개발 >접기 및 축소 인터페이스 기능을 구현하기 위한 WeChat 애플릿 개발
이번에는 접기 및 축소 인터페이스 기능을 구현하기 위한 WeChat 애플릿 개발 방법을 소개하겠습니다. 접기 및 축소 인터페이스 기능을 구현하기 위한 WeChat 애플릿 개발 시 주의 사항은 무엇입니까? 봐.
요구 사항
접힌 페이지 너머 부분에는 줄임표가 표시됩니다. 클릭하면 전체 내용이 표시됩니다.
해결해야 할 문제
방향 확장 및 접기에 따라 화살표가 변경됩니다
화살표 텍스트를 클릭하면 표시되는 내용이 변경됩니다
어떻게 해결하나요?
화살표 방향의 변경은 클릭 이벤트 바인드탭이며, 클릭 후 작은 아이콘이 변경됩니다.
텍스트 변경은 표시 또는 숨기기 항목으로 접을 때 다중 문제가 있습니다. -라인 텍스트 오버플로. 5가지 속성(표시: -webkit-box, -webkit-box-orient: 수직, -webkit-line-clamp, text-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, }) }
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트!
추천 도서:
위 내용은 접기 및 축소 인터페이스 기능을 구현하기 위한 WeChat 애플릿 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!