需求:为了引导用户去支付我们的产品,新增需求:1、文本多于一行的时候,只显示一行。2、文本等于1行的时候,全部隐藏显示阴影。 效果图:


实现思路:1、css里设置view的line-height,我这里设置了25px。 2、然后动态算出这个view在填充完数据后的高度,我这里填充完数据是200px。3、所以行数=view的高度/line-height,也就是200px/25px = 8行。
注意:这里的view一定要是填充完数据后的高度,也就是this.setData后的高度。
#####动态计算view高度的方法:
//创建节点选择器
var query = wx.createSelectorQuery();
query.select('#wdy').boundingClientRect();
query.exec( (res)=> {
res[0].height;
console.log("height==", res[0].height)
var height = res[0].height;
//25为css里设置的view的line-height
this.data.colNum = height/25;
console.log("行数==", this.data.colNum )
this.setData({
colNum: this.data.colNum,
})
})
#####wxml布局文件:
<view id = "wdy" > < /view>
顺便提下,我这里给文字设置阴影的方法是:
<view id = "wdy" style='word-break:break-all;text-shadow: 0 0 10px #333333;-webkit-text-fill-color: transparent;'>{{content}} </view>
#####注意:动态计算view高度的方法要在this.setData后,不然view的高度会一直是line-height的高度