内容超过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

内容超过7行显示查看全文相关推荐

Vue完成数据请求后内容超出显示省略号+显示查看全文按钮
需求: 如下图,当Vue完成数据请求后,根据文章内容设置显示方式.10行以内的显示全文,不显示[查看全文]按钮:内容超过指定行数时,超出内容隐藏,末尾显示省略号并显示[查看全文]按钮. 实现思路在 ...
table中的内容超过2行自动显示Tooltip
当我们在table中的某列内容过多时,会撑开td的高度,导致非常的难看本文介绍的是,当内容超过两行时,超出的部分用 - 代替,并且鼠标悬浮时,会显示出所有的内容但是当内容未超过两行时,鼠标悬浮时不 ...
html - - - 文字超过三行显示省略号，文字超过几行显示省略号
代码 /* 文字三行以上显示省略号 */ overflow: hidden; /*超出内容隐藏*/ text-overflow: ellipsis; /*超出内容为省略号*/ display: -we ...
css文本超过多行显示省略号兼容所有浏览器
在网上找到的都是用js判断的(https://www.cnblogs.com/zoumiaomiao/p/4952625.html https://www.cnblogs.com/ChanWunsam ...
文本超过指定行数显示折叠、展开按钮并以三个点结束
需求一段从接口获取到的文本,要求显示时,如果长度超过指定行数,则以三个点省略后面内容,并出现"全文"按钮,点击后显示全文,"全文"按钮变成"收起&q ...
表格内容单/多行展示（一）- 单行/多行显示的方法
分析单行/多行显示涉及到 table-layout: fixed; 这个属性,默认状态下的属性值是 auto (自动表格布局),两种不同的属性值区别如下: 方法我在设置表格内容单行/多行显示时采用 ...
多行文本超过一定行数后显示展开功能
超过单行显示三个点 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 超过多行显示三个点 display: -webkit ...
vue中实现文字超过2行... 展开-收起(兼容ie)
先看看实际效果 2.需求一步一步分析当文字超出省略号就想到css样式实现(ie不兼容) overflow: hidden; text-overflow: ellipsis;display: -we ...
overflow超出显示_实现：超过N行折叠并显示“...查看全部”【功能】
❝ 多行文本超过指定行数隐藏超出部分并显示"...查看全部"是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看, ❞ 于是就写了一个Vue的组件,本文简单介绍一下 ...
css多行显示省略号同时将最后一行只显示一半，查看全文效果
纯CSS就可以做出来,不需要通过后端来截取返回带有"..."的效果. 实现的效果图: 实现的代码: <p class="content"> 如果实现 ...

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

内容超过7行显示查看全文相关推荐

最新文章

热门文章