根据小程序的设定，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高度的方法了。如果您有更好的处理方法，望不吝赐教哈~~~
请发表评论