内容超过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个长度的,但是我不想去处理先。