微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
看了很多帖子,但是效果都不是很好。還是找微信小程序官方文檔,自己寫比較方便。自己動手豐衣足食!話不多說,上代碼!
先來個效果圖
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({ /** * 頁面的初始數(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)聽頁面加載 */ 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é)點信息'); 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)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ 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é)
以上所述是小編給大家介紹的微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)(包括按鈕角標(biāo)的實現(xiàn))
- 微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
- 微信小程序點擊按鈕動態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
- 微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
- 微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼
- 微信小程序按鈕點擊動畫效果的實現(xiàn)
- 操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁自定義導(dǎo)航欄功能
- 微信小程序mpvue點擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開發(fā)之點擊按鈕退出小程序的實現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
JS實現(xiàn)顏色的10進制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實現(xiàn)顏色的10進制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對顏色數(shù)值轉(zhuǎn)換的相關(guān)運算操作技巧,需要的朋友可以參考下2017-09-09nodejs創(chuàng)建web服務(wù)器之hello world程序
本文給大家分享nodejs創(chuàng)建web服務(wù)器之hello world程序,node真的很好用,不僅用v8引擎來解析了javascript外,還提供了高度優(yōu)化的應(yīng)用庫,真的很好,有需要的朋友一起來學(xué)習(xí)吧2015-08-08JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法實例分析【順序查找、最大最小值、自組織查詢】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實例形式分析了順序查找、最大最小值、自組織查詢算法相關(guān)原理與實現(xiàn)技巧,需要的朋友可以參考下2019-02-02JavaScript中實現(xiàn)最高效的數(shù)組亂序方法
這篇文章主要介紹了JavaScript中實現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下2014-10-10