首页 > 编程语言 >uniapp微信小程序设置动态高度为数据量高度

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

时间:2023-10-08 23:31:47浏览次数:38  
标签:uniapp svHeight res 高度 list 数据量 getSvheight 微信 data

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

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

uniapp微信小程序设置动态高度为数据量高度_#ifndef_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
    },
}


标签:uniapp,svHeight,res,高度,list,数据量,getSvheight,微信,data
From: https://blog.51cto.com/u_15694202/7763230

相关文章

  • uniapp实现页面横屏展示
    需求: 正常页面: 在路由处增加字段: "mp-weixin":{"pageOrientation":"landscape"//横屏 } ......
  • uniapp 点击video全屏播放
    话不多说直接上代码<video:id="item.id"@play="playFullscreen(item.id)":src="$IMG_URL+item.video"></video>不要写点击事件@click不会生效的要写@play播放事件以上代码中由于作者需循环渲染video故id是动态的如果没有动态的需求也可以写死playFullscreen(id){ uni......
  • uniapp 输入框文本域(uni-easyinput)内容长度限制
    问题描述提示:uni-ui组件库中uni-easyinput输入框组件相关使用问题在使用uni-easyinput组件时,你会发现,默认情况下你输入内容的长度最大是140原因是,uni-easyinput组件内封装的maxlength属性,在不设置的情况下,默认值为140。我们可以通过maxlength属性,为使用的输入框限制其......
  • uniapp 使用z-paging 分页组件 写在头部插槽内的单选按钮无法点击
    这个问题是因为组件层级太低<z-pagingref="paging"v-model="dataList"@query="queryList"auto-show-back-to-top:empty-view-z-index="9999"class="paging">      <viewslot="top">         <vie......
  • 请教大佬数据量大导致的慢sql问题
    业务:查询近一个月的数据办结情况现象:数据量大接口响应慢(10多秒),导致sql connectiontimedout,有时候又能正常返回请教如何优化该sql或是解决超时问题。尝试过修改数据库的timeout时长,无效     ......
  • SI3262—高度集成的低功耗SOC13.56MHz读卡器芯片 自带触摸
    Si3262是一款高度集成的低功耗SOC芯片,其集成了基于RISC-V核的低功耗MCU和工作在13.56MHz的非接触式读写器模块。MCU模块具有低功耗、LowPinCount、宽电压工作范围,集成了13/14/15/16位精度的ADC、LVD、UART、SPI、I2C、TIMER、WUP、IWDG、RTC、TSC等丰富的外设。内核采用RISC-V......
  • 根据您的数据量定制的ChatGPT,改变客户服务的方式
    在当今竞争激烈的商业环境中,提供优质的客户服务对于保持忠诚的客户群和推动业务增长至关重要。客户满意度已成为各行各企业的首要任务,因为它直接影响客户留存和品牌声誉。随着技术的进步,公司不断探索创新解决方案,以增强客户服务体验。其中一种解决方案是利用人工智能(AI)的ChatGPT,提......
  • uniapp微信小程序如何处理input输入空格问题?
    第一种方法用input组件自带的@input事件使用@input事件绑定变量用trim修剪掉前端和末尾的空格后用replace替换空格为空把处理过的值赋给自己<inputtype="text"class=""v-model="certNo"placeholder="请输入您的证书编号"@blur="certNo=certNo.trim().replace(/\s+/g,''......
  • uniapp微信小程序如何处理input输入空格问题?
    第一种方法用input组件自带的@input事件使用@input事件绑定变量用trim修剪掉前端和末尾的空格后用replace替换空格为空把处理过的值赋给自己<inputtype="text"class=""v-model="certNo"placeholder="请输入您的证书编号"@blur="certNo=certNo.trim().replace(/\s+/g,''......
  • uniapp项目实践总结(二十七)苹果应用商店上架教程
    导语:之前介绍了如何打包一个苹果安装包文件,如果想要上架苹果ios应用商店,那么就来这里学习一下方法吧。目录准备材料上架步骤审核事项准备材料基本信息构建版本:需要一个ipa格式安装包;logo:你应用的logo图标;应用名称:名称经过审核后才会显示在AppStore中;应用......