小程序统计view里文字的行数

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

效果图： image.png
image.png

实现思路：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的高度