微信小程序獲取字符長度,超過顯示點點點,后面更多,點擊展開和收起.

之前寫微信小程序的時候遇到的問題,功能很簡單就是超過顯示... 后面加展開, 點擊展開展開內容,下面有一個收起功能,遇見的問題是獲取不到元素信息,各種搜索,找開發文檔等,最后完美解決.

先上代碼:

 _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
              },
            })
          }
        })
      })
    }

最后直接調用就行了,然后去展示展開按鈕,效果如下: