1. 程式人生 > >資訊類正文內容的摺疊與展開(自創超簡單方法)

資訊類正文內容的摺疊與展開(自創超簡單方法)

自己開發的一個資訊類小程式,其中要用到正文內容的摺疊與展開功能,百度搜了N回,發現大部分文章介紹的方法都千篇一律,都是採用以下程式碼實現的:

display: -webkit-box;/*關鍵屬性*/
-webkit-box-orient: vertical;/* 關鍵屬性 */
-webkit-line-clamp:6;/* 關鍵屬性 */
overflow: hidden;/* 關鍵屬性 */
text-overflow:ellipsis;/* 超出內容顯示省略號*/

 

但自己用上去以後,發現問題多多,<p></p>標記無法識別,每篇文章載取的高度都不一樣,不是我要的效果。
整理了一下自己的思路,發現不難,馬上動手,發現很少的程式碼就實現了:


首先,在js檔案中加上以下程式碼:

page({
data:{
content_height:680, //這邊設定一下正文區域預設顯示的高度
ishiddenAllbtn:false //是否隱藏“顯示全文”按鈕區域
},

showAll: function () {
this.setData({
content_height: '100%', //點選“顯示全文”後的高度(顯示文章全文高度)
ishiddenAllbtn:true //隱藏“顯示全文”按鈕區域
})
},
})

 

在wxml檔案中加上:

<view class="content" style='height:{{content_height}}px'>


<template is="wxParse" data="{{wxParseData:content.nodes}}"/>
</view>

<view class='showAll' bindtap='showAll' hidden='{{ishiddenAllbtn}}'>顯示全文</view>