欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能

 更新時(shí)間:2019年09月26日 14:57:02   作者:孤獨(dú)行善  
這篇文章主要介紹了微信小程序多行文本顯示...+顯示更多按鈕和收起更多按鈕,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

看了很多帖子,但是效果都不是很好。還是找微信小程序官方文檔,自己寫比較方便。自己動(dòng)手豐衣足食!話不多說,上代碼!

時(shí)空傳送

先來個(gè)效果圖

1212

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)注明出處,謝謝!

相關(guān)文章

  • JavaScript中的數(shù)組操作介紹

    JavaScript中的數(shù)組操作介紹

    這篇文章主要介紹了JavaScript中的數(shù)組操作介紹,本文講解了join()、reverse()、sort()、concat()、slice()、splice()等幾個(gè)函數(shù)的操作實(shí)例,需要的朋友可以參考下
    2014-12-12
  • JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法

    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-09
  • nodejs創(chuàng)建web服務(wù)器之hello world程序

    nodejs創(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-08
  • echarts實(shí)現(xiàn)排名柱狀圖的示例代碼

    echarts實(shí)現(xiàn)排名柱狀圖的示例代碼

    在ECharts中,可以通過設(shè)置數(shù)據(jù)的順序來控制柱狀圖的排序,本文就介紹了echarts實(shí)現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-09-09
  • js中常用的Tab切換效果(推薦)

    js中常用的Tab切換效果(推薦)

    下面小編就為大家?guī)硪黄猨s中常用的Tab切換效果(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-08-08
  • JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果

    JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果

    這篇文章主要介紹了JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果,涉及JavaScript彈出窗口的設(shè)置及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法實(shí)例分析【順序查找、最大最小值、自組織查詢】

    JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法實(shí)例分析【順序查找、最大最小值、自組織查詢】

    這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實(shí)例形式分析了順序查找、最大最小值、自組織查詢算法相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-02-02
  • js判斷變量是否未定義的代碼

    js判斷變量是否未定義的代碼

    一般如果變量通過var聲明,但是并未初始化的時(shí)候,變量的值為undefined,而未定義的變量則需要通過 "typeof 變量"的形式來判斷,否則會(huì)發(fā)生錯(cuò)誤
    2012-11-11
  • JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法

    JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法

    這篇文章主要介紹了JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法,數(shù)組亂序的意思是,把數(shù)組內(nèi)的所有元素排列順序打亂,需要的朋友可以參考下
    2014-10-10
  • JS中多層次排序算法的實(shí)現(xiàn)代碼

    JS中多層次排序算法的實(shí)現(xiàn)代碼

    這篇文章主要給大家介紹了關(guān)于JS中多層次排序算法的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01

最新評(píng)論