之前写微信小程序的时候遇到的问题,功能很简单就是超过显示... 后面加展开, 点击展开展开内容,下面有一个收起功能,遇见的问题是获取不到元素信息,各种搜索,找开发文档等,最后完美解决.
先上代码:
_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 }, }) } }) }) }
最后直接调用就行了,然后去展示展开按钮,效果如下:
