十余年專(zhuān)注于網(wǎng)站建設_小程序開(kāi)發(fā)_APP開(kāi)發(fā)，低調、敢創(chuàng )新、有情懷！
全國服務(wù)熱線(xiàn)：
網(wǎng)站建設
APP開(kāi)發(fā)
小程序開(kāi)發(fā)
軟件開(kāi)發(fā)
用戶(hù)案例
新聞動(dòng)態(tài)
網(wǎng)頁(yè)知識
關(guān)于我們
發(fā)過(guò)程中，需要實(shí)現通過(guò)樣式CSS讀取HTML中的內內容，我通過(guò)實(shí)例向大家介紹功能實(shí)現方法。@南昌百恒網(wǎng)絡(luò ) 原文學(xué)習戳→&content=utf-8&pic=http://m.gimmickmag.com/uploads/images//default/default.png "分享到新浪微博")
例如把更多拼接在省略號后面
<view class="dynamics-txt r-simple" data-etc="...展開(kāi)">
當一個(gè)人喜愛(ài)梭魚(yú)跳躍的水聲時(shí)，他是個(gè)詩(shī)人；當他知道了這不過(guò)是強者追趕弱者的聲音時(shí)，他是個(gè)思想家?？墒且撬欢眠@種追逐的意義所在、這種毀滅性的果所造成的平衡為什么有其必要時(shí)，他就會(huì )重<text>收起text>
view>
.r-simple::before{content:attr(data-etc); position: absolute; bottom: 0; right:0px; background: #fff; color: #999999;}
html:
<view class="pd-10-0">
<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 ? \'收起\':\'展開(kāi)\'}}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;//是否顯示展開(kāi)按鈕
this.setData({
dataList: this.data.dataList
})
}
}
}).exec()
},
//展開(kāi)事件
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
})
},
以上都是南昌小程序開(kāi)發(fā)公司百恒網(wǎng)絡(luò )有十多年開(kāi)發(fā)經(jīng)驗的開(kāi)發(fā)工程師經(jīng)過(guò)實(shí)際操作總的實(shí)用經(jīng)驗，希望對廣大技術(shù)人員有所幫助。
百恒網(wǎng)絡(luò )，專(zhuān)業(yè)專(zhuān)注于南昌小程序開(kāi)發(fā)、南昌APP開(kāi)發(fā)，南昌網(wǎng)站建設，為用戶(hù)提供高品質(zhì)網(wǎng)絡(luò )產(chǎn)品和優(yōu)質(zhì)服務(wù)是我們始終的追求,歡迎來(lái)電咨詢(xún)洽談。
贛公網(wǎng)安備36010902000406號
售前咨詢(xún)