根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高。如果里面的内容固定还好说,直接设置一个高度就可以了。要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便。
举个例子:
如下这种情况,如果我们不给它设置一个高度,那么它只会在那个150px局部进行滚动了。
那么我们如何动态改变它的高度呢?
情况1:数据每条高度都是一样
原理:获取1条数据的高度*数据的条数。
js代码如下:
const query = wx.createSelectorQuery() query.select(\'.class-item\').boundingClientRect() query.exec(function (res) { console.log(res) console.log(res[0].height) console.log(res[0].height * data.t.length) let sumHeigth = res[0].height * data.t.length; _this.setData({ swiperHeight: sumHeigth }) })
对于 wx..createSelectorQuery() 不太了解的可看下官方文档说明。
data.t是ajax请求返回的结果。
class-item为单条数据的class,如下图:
返回结果如下:
wxml中赋值:
情况2:数据每条高度不一致
原理:给每条数据一个不同的class,再通过微信的selectAll返回每条的数据的高度,把这些高度相加就是整个swiper的高度了。
wxml代码截图如下:
class-item{{index}}里面的{{index}}是为了给每条数据不同的class
定义一个返回高度的方法:
get_wxml(className, callback) {
wx.createSelectorQuery().selectAll(className).boundingClientRect().exec(callback)
},
js代码如下:
let planItemSelect = \'\'; for(let i=0;i<data.t.length;i++){ //data.t是ajax请求返回的数据 planItemSelect += `.class-list-block${_this.data.status} .class-item${i},` //_this.data.status表示当前是第几个swiper-item } let sumHeigth = 0 _this.get_wxml(planItemSelect, (res) => { for (let i = 0; i < res[0].length; i++) { sumHeigth += res[0][i].height //获取每条数据的高度并相加 } _this.setData({ swiperHeight: sumHeigth }) })
最后赋值跟情况1最后一步是一样的了。
以上就是我动态获取swiper高度的方法了。如果您有更好的处理方法,望不吝赐教哈~~~
请发表评论