内容超过7行显示查看全文

获取到需要进行行数判断的内容value

1.匹配有没有换行符“\n”，如果有，行数lines+1

2.如果有，计算这部分内容的长度会有多少行（我这里每行22个中文的长度，英文计算不准确，一个字母也会计算成1个长度length）

3.如果没有换行符，直接根据长度计算有多少行

var _val = value;
          var lines = 0, result = "";
          var c;
          for (var k = 0; k < _val.length; k++) {
            c = _val.substr(k, 1);
            if (c == "\n") {
              lines += 1;
              var num = Math.ceil(result.length / 22);
              lines = lines + num;
              result = '';
            } else if (c != "\r") {
              result = result + c;
            }
          }
          if (lines == 0) {
            var num = Math.ceil(result.length / 22);
            lines = lines + num;
          }

我是把这部分做成了组件item的，所以还有动态更改

item.js  :

properties: {
    list: {
      type: Array,
      value: {},
      observer: function(newVal, oldVal) {
        var _data = this.properties.list;
        for (var i = 0; i < _data.length; i++) {
          var _val = _data[i].value;
          var lines = 0, result = "";
          var c;
          for (var k = 0; k < _val.length; k++) {
            c = _val.substr(k, 1);
            if (c == "\n") {
              lines += 1;
              var num = Math.ceil(result.length / 22);
              lines = lines + num;
              result = '';
            } else if (c != "\r") {
              result = result + c;
            }
          }
          if (lines == 0) {
            var num = Math.ceil(result.length / 22);
            lines = lines + num;
          }
          _data[i].lines = lines;
        }
        this.setData({
          content: _data
        })
      }
    }
  },

 

item.html  :

<block wx:for="{{content}}" wx:for-index="idx" wx:key="{{idx}}">
    <view class='item'>
      <view class='head flex'>
        <view class='user flex'>
          <view class='face'>
            <x-img mode="aspectFit" src="{{item.avatar}}"></x-img>
          </view>
          <view class='name'>
            <text>{{item.nickname}}</text>
            <text>{{dateFr.formatTime(item.addTime*1000,'monthdaydot')}}</text>
          </view>
        </view>
        <!-- <view catchtap='follow' data-num='{{idx}}' data-userid='{{item.userId}}' wx:if="{{follow}}" class="{{item.follow == 1?'hadFollow':''}} fllow flex">{{item.follow == 1?'已关注':' ✚ 关注'}}</view> -->
      </view>
      <view wx:if="{{item.show}}" class='all_words'><text>{{item.value}}</text></view>
      <view wx:if="{{!item.show}}" class='words'><text>{{item.value}}</text></view>
      <view wx:if="{{item.lines >7}}" class='toogle' catchtap='toogle' data-num='{{idx}}'>
        <view wx:if="{{!item.show}}">查看全文<text class="arr down"></text></view>
        <view wx:if="{{item.show}}">收起<text class="arr"></text></view>
      </view>
      <view class='goods_img felx' wx:if="{{item.picList.length>0}}">
        <block wx:for="{{item.picListSmall}}" wx:key="" wx:for-item="img">
          <view class="img">
            <image mode='aspectFill' src='{{img.url}}' catchtap='previewImage' data-imgarr="{{item.preImg}}" data-idx="{{index}}"></image>
          </view>
        </block>
      </view>
      <view wx:if="{{!nogood && item.goodName != ''}}" class='good flex' catchtap='toGood' data-id='{{item.goodId}}'>
        <view class='good_img'>
          <x-img mode="aspectFit" src="{{item.goodPic}}"></x-img>
        </view>
        <view class='right'>
          <view class='good_name'>{{item.goodName}}</view>
          <view class='price'>￥ {{item.price}}</view>
        </view>
      </view>
      <view class='operation flex'>
        <view class='operation_l flex'>
          <view class='flex' catchtap="{{follow?'':'toDown'}}" data-id='{{item.id}}'>
            <text>下载 </text>
            <text> {{item.down}}</text>
          </view>
          <view class='flex' catchtap="{{follow?'':'toLikes'}}" data-id='{{item.id}}'>
            <text>点赞 </text>
            <text> {{item.like}}</text>
          </view>
        </view>
        <view class='operation_r flex'>
          <view catchtap='download' data-word='{{item.value}}' data-img='{{item.picList}}' data-id='{{item.id}}' data-num='{{idx}}'>分享发圈</view>
          <view catchtap='likes' class="praise {{item.isLike == 1?'active':''}}" data-id='{{item.id}}' data-num='{{idx}}'>点赞</view>
        </view>
      </view>
    </view>
  </block>

 

tip:有个小问题，如果有英文字母的时候，一个英文字母也会占1个长度，实际上展示的时候是没有1个长度的，但是我不想去处理先。

转载于:https://www.cnblogs.com/jamiezou/p/11069317.html