這次給大家?guī)砦⑿判〕绦蜷_發(fā)實現(xiàn)折疊收縮界面功能，微信小程序開發(fā)實現(xiàn)折疊收縮界面功能的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
需求
頁面折疊超出的的部分顯示省略號，點擊展開后顯示全部內(nèi)容
需要解決的問題
-
箭頭隨展開折疊后箭頭方向的變化
-
當(dāng)點擊箭頭文本顯示內(nèi)容的變化
如何解決？
-
箭頭方向的變化是一個點擊事件bindtap,點擊后更換小圖標(biāo)；
-
文本變化是一個show或者h(yuǎn)ide的事情，折疊的時候有個多行文本溢出得問題五個屬性（display: -webkit-box，-webkit-box-orient: vertical， -webkit-line-clamp，text-overflow，overflow）
-
狀態(tài)與數(shù)據(jù)綁定控制樣式
具體實現(xiàn)
wxml
<view> <view> <view> <view>公司介紹</view> </view> <view> <text> 創(chuàng)業(yè)是個失敗概率很大的事情，我們很高興從2012底到現(xiàn)在還活著， 而且還活的很不錯。 目前有贊旗下的產(chǎn)品有：有贊微商城、有贊收銀、有贊零售、有贊美業(yè)、有贊批發(fā)、有贊買家版、有贊微小店. </text> <text> 我們認(rèn)為，相比較業(yè)務(wù)來說，團(tuán)隊才是公司的核心。有贊沒有“員工”只有“小伙伴”，也沒有人姓“公”名“司”，我們有一群聰明、有要性、又皮實的伙伴，這才是我們最大的資產(chǎn)。 </text> <text> 有贊的小伙伴目前已超過1000人，工程師比例占55%，我們有很濃的工程師氛圍，每周都有很多的有意思的分享：有出國旅游的分享、有如何搭訕的分享、有如何裝修房子的分享...技術(shù)分享更是數(shù)不勝數(shù)。 我們的工作不是很輕松，但我們的氛圍很輕松，很open，公司里隨處可見騎著獨輪車來回跑的工程師、懶人沙發(fā)、午睡吊籃、復(fù)古電話亭等等，每個月都有節(jié)日、新人表演、拓展、派對等，對我們來說，天天都可以是節(jié)日。我們倡導(dǎo)簡單直接的溝通方式，希望做一家通透的公司。這里并沒有過多的等級劃分，你可以隨時提出自己的意見和任何人PK。福利方面我們?nèi)~繳納五險一金，每月980元的有贊E卡鼓勵大家一起吃喝玩樂。工程師標(biāo)配MacBookPro、大屏顯示器和機械鍵盤。辦公室里常備零食、水果，休息區(qū)有電視、游戲機、桌球、乒乓球、四驅(qū)賽車、桌游隨時供大家放松減壓。每天晚下班的打車費報銷，每年給你和你的家人提供旅游和體檢等等。 </text> </view> <image></image> </view> </view>
登錄后復(fù)制
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)容顯示省略號*/
}
.hide{
display: -webkit-box;
}
.show{
display: block;
}
.arrow{
position: absolute;
width: 40rpx;
height: 43rpx;
left: 50%;
transform: translate(-50%);
}
登錄后復(fù)制
js
Page({
data: {
isFold: true,
},
showAll: function (e) {
this.setData({
isFold: !this.data.isFold,
})
}
登錄后復(fù)制
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注有卡有網(wǎng)。
