太阳√1城集团网址查询(中国)·No. 1 in the world

从事小程序开发过程中，需要实现通过样式CSS读取HTML中的内内容，我通过实例向大家介绍功能实现方法，接下来由南昌小程序开发公司百恒网络开发工程师通过实例向大家介绍实现方法。

例如把更多拼接在省略号后面

当一个人喜爱梭鱼跳跃的水声时，他是个诗人；当他知道了这不过是强者追赶弱者的声音时，他是个思想家。可是要是他不懂得这种追逐的意义所在、这种毁灭性的果所造成的平衡为什么有其必要时，他就会重<text>收起text>

view>

.r-simple::before{content:attr(data-etc); position: absolute; bottom: 0; right:0px; background: #fff; color: #999999;}

html:

<rich-text id="comment-rich-text-{{index}}"

nodes="{{ item.content }}"

class="r-content {{!!item.extendStr ? \'r-content-simple\' : \'\'}}">

rich-text>

view>

<view class="extendBtn" bindtap="extendEvent" data-index="{{index}}" wx:if="{{item.extendBtn}}">{{item.extendStr ? \'收起\':\'展开\'}}view>

JS:

//同图片加载完成计算文字高度

listenCommentUserAvatarLoad: function (event) {

let commentIdx = event.currentTarget.dataset.index

var query = wx.createSelectorQuery();

query.select(`#comment-rich-text-${commentIdx}`).boundingClientRect((rect) => {

if (rect != null) {

const height = rect.height

if (height > 120) { //Line-height 24 * 5 行

this.data.dataList[commentIdx][\'extendStr\'] = true;

this.data.dataList[commentIdx][\'extendBtn\'] = true;//是否显示展开按钮

this.setData({

dataList: this.data.dataList

})

}

}).exec()

//展开事件

extendEvent:function(event){

let commentIdx = event.currentTarget.dataset.index

let curItem = this.data.dataList[commentIdx];

this.data.dataList[commentIdx][\'extendStr\'] = curItem.extendStr ? false:true;//是否全部显示

this.setData({

dataList: this.data.dataList

})

以上都是南昌小程序开发公司百恒网络有十多年开发经验的开发工程师经过实际操作总的实用经验，希望对广大技术人员有所帮助。

百恒网络，专业专注于南昌小程序开发、南昌APP开发，南昌网站建设，为用户提供高品质网络产品和优质服务是我们始终的追求,欢迎来电咨询洽谈。