這次帶給大家微信小程式開發(fā)實(shí)現(xiàn)折疊收縮介面功能，微信小程式開發(fā)實(shí)現(xiàn)折疊收縮介面功能的注意事項(xiàng)有哪些，以下就是實(shí)戰(zhàn)案例，一起來看一下。

需求

頁(yè)面折疊超出的部分顯示省略號(hào)，點(diǎn)擊展開後顯示全部?jī)?nèi)容

#需要解決的問題

• 箭頭隨展開折疊後箭頭方向的變化

• #當(dāng)點(diǎn)擊箭頭文字顯示內(nèi)容的變化

如何解決？

• 箭頭方向的變化是一個(gè)點(diǎn)擊事件bindtap,點(diǎn)擊後更換小圖示；

• 文字變更是一個(gè)show或hide的事情，折疊的時(shí)候有個(gè)多行文本溢出得問題五個(gè)屬性（display: -webkit-box，-webkit-box-orient: vertical， -webkit-line-clamp，text-overflow，overflow）

• 狀態(tài)與資料綁定控制樣式

#具體實(shí)作

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">
??????????創(chuàng)業(yè)是個(gè)失敗概率很大的事情，我們很高興從2012底到現(xiàn)在還活著，?而且還活的很不錯(cuò)。?目前有贊旗下的產(chǎn)品有：有贊微商城、有贊收銀、有贊零售、有贊美業(yè)、有贊批發(fā)、有贊買家版、有贊微小店.
????????</text>
????????<text class="second-dec">
??????????我們認(rèn)為，相比較業(yè)務(wù)來說，團(tuán)隊(duì)才是公司的核心。有贊沒有“員工”只有“小伙伴”，也沒有人姓“公”名“司”，我們有一群聰明、有要性、又皮實(shí)的伙伴，這才是我們最大的資產(chǎn)。
????????</text>
????????<text class="last-dec">
??????????有贊的小伙伴目前已超過1000人，工程師比例占55%，我們有很濃的工程師氛圍，每周都有很多的有意思的分享：有出國(guó)旅游的分享、有如何搭訕的分享、有如何裝修房子的分享...技術(shù)分享更是數(shù)不勝數(shù)。?我們的工作不是很輕松，但我們的氛圍很輕松，很open，公司里隨處可見騎著獨(dú)輪車來回跑的工程師、懶人沙發(fā)、午睡吊籃、復(fù)古電話亭等等，每個(gè)月都有節(jié)日、新人表演、拓展、派對(duì)等，對(duì)我們來說，天天都可以是節(jié)日。我們倡導(dǎo)簡(jiǎn)單直接的溝通方式，希望做一家通透的公司。這里并沒有過多的等級(jí)劃分，你可以隨時(shí)提出自己的意見和任何人PK。福利方面我們?nèi)~繳納五險(xiǎn)一金，每月980元的有贊E卡鼓勵(lì)大家一起吃喝玩樂。工程師標(biāo)配MacBookPro、大屏顯示器和機(jī)械鍵盤。辦公室里常備零食、水果，休息區(qū)有電視、游戲機(jī)、桌球、乒乓球、四驅(qū)賽車、桌游隨時(shí)供大家放松減壓。每天晚下班的打車費(fèi)報(bào)銷，每年給你和你的家人提供旅游和體檢等等。
????????</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;/*關(guān)鍵屬性*/
??font-size:28rpx;
??color:#cfcfd0;
??line-height:?40rpx;
??word-break:?break-all;
??-webkit-box-orient:?vertical;/*?關(guān)鍵屬性?*/
??-webkit-line-clamp:6;/*?關(guān)鍵屬性?*/
??overflow:?hidden;/*?關(guān)鍵屬性?*/
??text-overflow:ellipsis;/*?超出內(nèi)容顯示省略號(hào)*/
}
.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,
??})
?}

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

js遍歷操作css

#vue-cli已安裝與設(shè)定webpack

以上是微信小程式開發(fā)實(shí)現(xiàn)折疊收縮介面功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！