微信小程序获取字符长度,超过显示点点点,后面更多,点击展开和收起.

之前写微信小程序的时候遇到的问题,功能很简单就是超过显示... 后面加展开, 点击展开展开内容,下面有一个收起功能,遇见的问题是获取不到元素信息,各种搜索,找开发文档等,最后完美解决.

先上代码:

 _getFields (id) {
      return new Promise((resolve,reject) => {
        wx.createSelectorQuery().in(this).selectAll(id).boundingClientRect().exec(function(res){
          if( res && res.length ){
            if( res[0] && res[0].length ){
              let w = res[0][0].width;
              resolve(w)
            }
          }else{
            reject()
          }
        })
      })
    }

我的组件是一个自定义组件,里面的id是动态的,我记得官方文档上没有in(this),导致获取不到元素的信息.

methods:{
    // 获取指定元素实际宽度
    _initData(){
      let dataInfo = Object.assign({},this.properties.item);
      this.setData({dataInfo},()=>{
        Promise.all([
          this._getFields(`#description-box-${obj.id}`),
          this._getFields(`#text-description-${obj.id}`)
        ]).then(res => {
          let parentWidth = res[0];
          let childWidth = res[1];
          if( (parentWidth - childWidth) < 40 ){
            this.setData({
              toggleParams: {
                toggleFlag: 1,
                toggleShow: true
              },
            })
          }else{
            this.setData({
              toggleParams: {
                toggleFlag: 0,
                toggleShow: false
              },
            })
          }
        })
      })
    }

最后直接调用就行了,然后去展示展开按钮,效果如下: