Reference article Reference article
First look at the problem that wxml cannot be used in cover-view
:
<cover-view class="c" hidden="{
{xianshi}}" bindtap="kantie" style="width:{
{kuan}}px" >
<cover-view class='c'>{
{main}}</cover-view>
</cover-view>
css:
.c{display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space:pre-line;
}
The effect is
to replace the cover-view in wxml with view like this :
The following is my solution. The specific solution is to intercept the length of the dynamic data and manually stitch the ellipsis to
see the effect first.
Mainly done in js
var mian=res.data[0].main;
var m = mian.substring(0, 18);
if(m.length>=12){
m=m+"...";
}
else{
m="这啥都没写....";
}
Below is the code
wx.request({
url: 'http://192.168.1.100:9090/xcxmvc/tankuang/dl',
// 'https://www.fuhufuhu.com/xcxmvc/nr/dl',
method: 'get',
data: {
id: that.data.id,
},
header: {
'content-type': 'application/json' // 默认值
// 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data[0].main);
// var json=JSON.stringify(res.data);
var mian=res.data[0].main;
var m = mian.substring(0, 18);
if(m.length>=12){
m=m+"...";
}
else{
m="这啥都没写....";
}
console.log(m.length);
that.setData({
//nr6: json,
id:res.data[0].id,
main:m,
iconPath:res.data[0].iconPath,
hou: true
});
//var json=JSON.parse(res.data);
//console.log(res.data[0].id);
},
fail: function (res) {
console.log(".....fail.....");
}
})