我的需求是输入信息,然后点击查询按钮,有数据才就调用this.getSvheight函数来设置动态高度,没数据获取到类名的高度为0,我这里做了v-if判断没数据就不渲染这个标签了

uniapp微信小程序设置动态高度为数据量高度_uniapp

uniapp微信小程序设置动态高度为数据量高度_uniapp_02

如果是订单列表那种直接请求列表数据 可以在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
    },
}