小程序内容超出显示查看更多

wxml:

<view class='company-synopsis-panel white-bg-radius'>

<view class='my-companye-title flex-between'>

<view class='bold-text2851'>公司简介</view>

<view class='text20517' bindtap='toggle'>{{readmore.tip}}<image class='green-rrow' src='{{readmore.rrow}}'></image></view>

</view>

<view class='text20451 company-synopsis-content {{readmore.status ? "company-synopsis-ovflow" : ""}}'>

腾讯科技（深圳）有限公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承一切以用户价值为依归的经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板公开上市（股票代号700），也是中国服务用户最多的互联。腾讯科技（深圳）有限公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承一切以用户价值为依归的经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板公开上市（股票代号700），也是中国服务用户最多的互联。

</view>

</view>

wxss:

.white-bg-radius{

background:rgba(255,255,255,1);

box-shadow:0rpx 12rpx 35rpx 0rpx rgba(215,216,218,0.8);

border-radius:16rpx;

}

.flex-between{

display: flex;

align-items: center;

justify-content: space-between;

}

.bold-text2851{

font-size:28rpx;

font-weight:bold;

color:rgba(51,51,51,1);

}

.text20451{

font-size:20rpx;

font-weight:400;

color:rgba(51,51,51,1);

}

.text20517{

font-size:20rpx;

font-weight:500;

color:rgba(17,158,161,1);

}

.company-synopsis-panel{

padding: 0 0 31rpx 0;

}

.my-companye-title{

height: 74rpx;

line-height: 74rpx;

padding: 0 48rpx;

border-bottom: 2rpx solid rgba(238,238,238,1);

}

.green-rrow{

width: 20rpx;

height: 11rpx;

padding-left: 12rpx;

}

.company-synopsis-content{

padding: 31rpx 45rpx 0 45rpx;



}

.company-synopsis-ovflow{

display: -webkit-box;

overflow: hidden;

text-overflow: ellipsis;

word-wrap: break-word;

white-space: normal;

-webkit-box-orient: vertical;

-webkit-line-clamp: 5;

}

js:

Page({



/**

* 页面的初始数据

*/

data: {

readmore: {

status: true,

tip: '查看更多',

rrow:'https://res.tuoluohuodong.com/green_bottom_rrow.png'

}

},

onReady() {

const query = wx.createSelectorQuery()

let self = this

query.select(".content").boundingClientRect(function (res) {

const lineHeight = 18

const height = res.height

const status = "readmore.status"

self.setData({

[status]: height / lineHeight > 4

})

}).exec()

},

toggle() {

const status = this.data.readmore.status

this.setData({

readmore: {

status: !status,

tip: status ? '收起' : '查看更多',

rrow: status ? 'https://res.tuoluohuodong.com/green_top_rrow.png' : 'https://res.tuoluohuodong.com/green_bottom_rrow.png'

}

})

},

})