微信小程序實現(xiàn)折疊與展開文章功能
更新時間:2018年06月12日 10:53:10 作者:kerin
最近做項目遇到這樣的需求,頁面折疊超出的的部分顯示省略號,點擊展開后顯示全部內容。具體實現(xiàn)代碼大家跟隨腳本之家小編一起學習吧
需求
頁面折疊超出的的部分顯示省略號,點擊展開后顯示全部內容

需要解決的問題
- 箭頭隨展開折疊后箭頭方向的變化
- 當點擊箭頭文本顯示內容的變化
如何解決?
- 箭頭方向的變化是一個點擊事件bindtap,點擊后更換小圖標;
- 文本變化是一個show或者hide的事情,折疊的時候有個多行文本溢出得問題五個屬性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow)
- 狀態(tài)與數(shù)據(jù)綁定控制樣式
具體實現(xiàn)
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">
創(chuàng)業(yè)是個失敗概率很大的事情,我們很高興從2012底到現(xiàn)在還活著, 而且還活的很不錯。 目前有贊旗下的產品有:有贊微商城、有贊收銀、有贊零售、有贊美業(yè)、有贊批發(fā)、有贊買家版、有贊微小店.
</text>
<text class="second-dec">
我們認為,相比較業(yè)務來說,團隊才是公司的核心。有贊沒有“員工”只有“小伙伴”,也沒有人姓“公”名“司”,我們有一群聰明、有要性、又皮實的伙伴,這才是我們最大的資產。
</text>
<text class="last-dec">
有贊的小伙伴目前已超過1000人,工程師比例占55%,我們有很濃的工程師氛圍,每周都有很多的有意思的分享:有出國旅游的分享、有如何搭訕的分享、有如何裝修房子的分享...技術分享更是數(shù)不勝數(shù)。 我們的工作不是很輕松,但我們的氛圍很輕松,很open,公司里隨處可見騎著獨輪車來回跑的工程師、懶人沙發(fā)、午睡吊籃、復古電話亭等等,每個月都有節(jié)日、新人表演、拓展、派對等,對我們來說,天天都可以是節(jié)日。我們倡導簡單直接的溝通方式,希望做一家通透的公司。這里并沒有過多的等級劃分,你可以隨時提出自己的意見和任何人PK。福利方面我們全額繳納五險一金,每月980元的有贊E卡鼓勵大家一起吃喝玩樂。工程師標配MacBookPro、大屏顯示器和機械鍵盤。辦公室里常備零食、水果,休息區(qū)有電視、游戲機、桌球、乒乓球、四驅賽車、桌游隨時供大家放松減壓。每天晚下班的打車費報銷,每年給你和你的家人提供旅游和體檢等等。
</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,
})
}
總結
以上所述是小編給大家介紹的微信小程序折疊與展開文章的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
深入理解JavaScript系列(11) 執(zhí)行上下文(Execution Contexts)
本章我們要講解的是ECMAScript標準里的執(zhí)行上下文和相關可執(zhí)行代碼的各種類型2012-01-01
如何實現(xiàn)修改密碼時密碼框顯示保存到cookie的密碼
修改密碼時密碼框顯示保存到cookie的密碼,只要在input框中加入AUTOCOMPLETE="OFF" 即可,感興趣的朋友可以了解下2013-12-12
layui 圖片上傳+表單提交+ Spring MVC的實例
今天小編就為大家分享一篇layui 圖片上傳+表單提交+ Spring MVC的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

