小程序实现微信朋友圈全文展开功能

微信全文展开功能看起来很简单，其实实现起来还是有一些小难度的。

主要通过components全局组件方式来对text内容进行一个封装，

下面就是components的JS核心代码：

Component({
  options: {
  addGlobalClass: true
  },
  properties: {
  content: {
  type: String,
  observer(val) {
  console.log(val)
  if (this.data.onReady) {
  setTimeout(() => this.checkFold(), 10)
  }
  }
  },
  maxline: {
  type: Number,
  value: 1,
  observer(value) {
  if (!(/^[1-5]$/).test(value)) {
  throw new Error(`Maxline field value can only be digits (1-5), Error value: ${value}`)
  } else if (this.data.onReady) {
  setTimeout(() => this.checkFold(), 10)
  }
  }
  },
  position: {
  type: String,
  value: "left"
  },
  foldable: {
  type: Boolean,
  value: true
  }
  },
  data: {
  onFold: false,
  showFold: false,
  onReady: false
  },
  lifetimes: {
  ready() {
  this.checkFold()
  this.data.onReady = true
  }
  },
  methods: {
  checkFold(e) {
   



  const query = wx.createSelectorQuery().in(this);
  query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
  this.setData({
  showFold: res[0].height < res[1].height
  })
  }).exec()
  },
 
  handleFold() {
  this.setData({
  onFold: !this.data.onFold
  })
  }

  }
  })

其他部分有需要的可以关注留言。