我的需求是输入信息,然后点击查询按钮,有数据才就调用this.getSvheight函数来设置动态高度,没数据获取到类名的高度为0,我这里做了v-if判断没数据就不渲染这个标签了
如果是订单列表那种直接请求列表数据 可以在onReady页面进入的时候调用一次,或按照需求调用即可
svHeight: 0,
list: []
<view class="queryCert-result-list" v-if="list.length>0" :style="'max-height: ' + svHeight + 'px;'">
<view class="queryCert-result-list-li" v-for="(item,index) in list" :key="index"></view>
</view>
methods: {
getList() {
api().then((res) => {
if(res.data.code===0) {
if(res.data.data) {
this.res.data.data;
}
} else {
this.list = [];//没有数据置空 后续调动this.getSvheight()使用
}
}).catch().finally(() =>{
if (this.list.length>0) this.getSvheight()
}),
}
getSvheight() {
let that = this;
// h5 app mp-alipay不支持微信的方法
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效,H5端查看会报错
uni.getSystemInfo({
success: function (res) {
console.log("res===", res);
that.$nextTick(() => {
uni.createSelectorQuery().select(".queryCert-result-list").boundingClientRect(function (data) {
console.log("data===",data);
that.svHeight = (res.windowHeight - data.top);
}).exec();
});
}
});
// #endif
},
}