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

先上程式碼:

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

最後直接呼叫就行了,然後去展示展開按鈕,效果如下: