资讯类正文内容的折叠与展开（自创超简单方法）

自己开发的一个资讯类小程序，其中要用到正文内容的折叠与展开功能，百度搜了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>