基于wepy的小程序长文本的全文/收起效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36181615/article/details/88795894

简单效果图

思路
通过设置内容行高和判断dom高度实现显示收起效果，超过四行显示全文
html

<scroll-view scroll-y="true" class="swiper-item-box" style="height:{{winHeight - 40}}px" bindscrolltolower="onReachBottom">  
      <repeat for="{{list}}" key="index" index="index" item="item">
          <view class="news_list_item"> 
              <view class="news_con">  
                   <view class="content news{{index}} {{item.isfold ? 'off' : 'on'}}">
                     <!-- 仅仅模拟 -->
                     <view wx:if='{{index&2}}'> 
                        内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
                        内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
                        内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
                        内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
                     </view>
                     <view wx:else> 
                        内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
                     </view>  
                   </view>  
                 
                <view wx:if="{{item.isShow}}"> 
                    <view class="c626C78" @tap='toggleFold({{index}})' hidden='{{!item.isfold}}'>全文</view> 
                    <view class="c626C78" @tap='toggleFold({{index}})' hidden='{{item.isfold}}'>收起</view> 
                </view> 
              </view>
          </view> 
    </repeat> 
  </scroll-view> 

css

.news_list_item {
  display: flex;
  padding: 30rpx;
  width: cacl(100% - 60rpx);
  border-bottom: 1px solid #e4e4e4;
  }
  .content {
  line-height: 50rpx;
  &.off {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    align-content: center;
  }
  &.on {
    display: block;
    text-overflow: clip;
    overflow: visible;
  }
} 

js

<script>
import wepy from 'wepy'; 
import mainServe from '@/serve/api/main'; 
import tips from '@/utils/tips';  
export default class Order extends wepy.page {
  config = {
    navigationBarTitleText: '动态',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#00A06B',
    backgroundColor: '#00A06B'
  };  
  data = { 
    winHeight: 0, 
    list: [],
    currentPage: 1,
    //防止重复加载
    preventRepeatReuqest: false
  };
  // 获取列表数据
  async getData() {
    const list = await mainServe.building({
      page: this.currentPage
    });
    const pl = this.list.length
    this.list = this.list.concat(list.data.data); 
    this.page_total = list.data.totalPage;
    this.currentPage = list.data.nowPage;
    this.$apply(); 
    // 重点
    const query3 = wx.createSelectorQuery();
   // 处理新增的数据  this.list.slice(pl)
    this.list.slice(pl).forEach((element, index) => {  
      query3.select('.news' + (pl + index))   // 列表的className
        .boundingClientRect(data => { 
          element.isfold = data.height > 100 ? true : false;  // 是否折叠，行高为25，显示4行，超出隐藏
          element.isShow = data.height > 100 ? true : false;  // 全文/收起按钮显示
          this.$apply(); 
        })
        .exec();
    });
  }
  onLoad() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.winHeight = res.windowHeight;
      }
    });
    this.getData();
  } 
  methods = { 
   // 切换
    toggleFold(index) {
      this.list[index].isfold = !this.list[index].isfold;
      this.$apply();
    }, 
  };

  //加载更多
  onReachBottom() {
    let that = this;
    that.showLoading = true;
    //判断总页数是否大于翻页数
    if (that.page_total > that.currentPage) {
      //防止重复加载
      if (that.preventRepeatReuqest) {
        return true;
      }
      that.preventRepeatReuqest = true;
      that.currentPage++;

      that.getData();

      that.preventRepeatReuqest = false;
    } else {
      tips.toast('没有更多', null, 'none');
    }
  }
}