小程序实践（五）--查看全文

小程序实践(五)—查看全文

今天写一个特别简单的小例子，查看全文，根据文字的数量以及行数来控制它的显示隐藏。
大神勿喷哦，只是记录自己在学习小程序的过程的点点滴滴，初次接触小程序的可以看一下，以便日后开发中有类似的可以直接拿走用。

<span class="more {{colNum >3 ? 'hide' : ''}}" id="wdy" >内容区域</span>

// pages/viewMore/viewMore.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  var that=this;
  that.getColNum();
  },
  getColNum:function(){
      //创建节点选择器
      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 / 28;
        console.log("行数==", this.data.colNum)
        this.setData({
          colNum: this.data.colNum,
        })
      })
  },
  hideAllCont:function(){
    var that =this;
    that.onLoad();
  },
  viewAllCont: function () {
    this.setData({
      colNum:'1',
    })
  }
})

例子虽然简单，但在以后开发中如果遇到需要根据需求判断行数字数来操控DOM节点的话，可以根据这个来进行更改。小程序对于DOM直接进行操作的可行性虽然不高，但也可以在开发中不断尝试，也许你会有意外的收获