微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
看了很多帖子,但是效果都不是很好。還是找微信小程序官方文檔,自己寫比較方便。自己動(dòng)手豐衣足食!話不多說,上代碼!
先來個(gè)效果圖
html
<block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view> <view class="text_toggle_box" wx:if='{{item.seeMore}}' data-index='{{index}}' catchtap='toggleHandler'> <text class="text_toggle_text">查看更多</text> <image class="toggle-icon" src="../../images/1.png"></image> </view> <view class="text_toggle_box" wx:if='{{!item.seeMore && item.auto}}' data-index='{{index}}' catchtap='toggleContent'> <text class="text_toggle_text">收起</text> <image class="toggle-icon" src="../../images/2.png"></image> </view> </view> </block>
wxss
.box{ margin: 40rpx 32rpx; } .text_box{ width: 100%; font-size: 30rpx; font-weight: 400; color: rgba(87,105,123,1); line-height: 48rpx; } .textFour_box{ width: 100%; font-size: 30rpx; font-weight: 400; color: rgba(87,105,123,1); line-height: 26px; text-align: justify; } .toggle-icon { width: 25rpx; height: 25rpx; } .text_toggloe_box{ display: -webkit-box; display: -webkit-flex; flex-direction: row; align-items: center; margin: 10rpx 0; } .text_toggle_text{ font-size: 24rpx; color: #333; line-height: 32rpx; margin-right: 10rpx; } .three{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
js
var index; Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { trendsList:[ { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, ] }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 */ onLoad: function (options) { var that = this; const query = wx.createSelectorQuery(); query.selectAll('.textFour_box').fields({ size: true, }).exec(function (res) { console.log(res[0], '所有節(jié)點(diǎn)信息'); let lineHeight = 26; //固定高度值 單位:PX for (var i = 0; i < res[0].length; i++) { if ((res[0][i].height / lineHeight) > 3) { that.data.trendsList[i].auto = true; that.data.trendsList[i].seeMore = true; } } that.setData({ trendsList: that.data.trendsList }) }) }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }, //展開更多 toggleHandler: function (e) { var that = this; index = e.currentTarget.dataset.index; for (var i = 0; i < that.data.trendsList.length; i++) { if (index == i) { that.data.trendsList[index].auto = true; that.data.trendsList[index].seeMore = false; } } that.setData({ trendsList: that.data.trendsList }) }, //收起更多 toggleContent: function (e) { var that = this; index = e.currentTarget.dataset.index; for (var i = 0; i < that.data.trendsList.length; i++) { if (index == i) { that.data.trendsList[index].auto = true; that.data.trendsList[index].seeMore = true; } } that.setData({ trendsList: that.data.trendsList }) }, })
總結(jié)
以上所述是小編給大家介紹的微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))
- 微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼
- 微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
- 微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
- 微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼
- 微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn)
- 操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對(duì)顏色數(shù)值轉(zhuǎn)換的相關(guān)運(yùn)算操作技巧,需要的朋友可以參考下2017-09-09nodejs創(chuàng)建web服務(wù)器之hello world程序
本文給大家分享nodejs創(chuàng)建web服務(wù)器之hello world程序,node真的很好用,不僅用v8引擎來解析了javascript外,還提供了高度優(yōu)化的應(yīng)用庫(kù),真的很好,有需要的朋友一起來學(xué)習(xí)吧2015-08-08echarts實(shí)現(xiàn)排名柱狀圖的示例代碼
在ECharts中,可以通過設(shè)置數(shù)據(jù)的順序來控制柱狀圖的排序,本文就介紹了echarts實(shí)現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果
這篇文章主要介紹了JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果,涉及JavaScript彈出窗口的設(shè)置及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法實(shí)例分析【順序查找、最大最小值、自組織查詢】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實(shí)例形式分析了順序查找、最大最小值、自組織查詢算法相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下2014-10-10