<template> <view> <cu-custom bgColor="bg-gradual-blueness" :isBack="true"> <block slot="backText">返回</block> <block slot="content">隐患提交</block> </cu-custom> <view class="top-fixed"> <view class="cu-bar search bg-white"> <view class="search-form radius"> <text class="cuIcon-search"></text> <input placeholder="请输入关键字"></input> </view> <view class="action"> <button class="cu-btn bg-green shadow-blur radius">搜索</button> </view> </view> <view class="line"></view> </view> <scroll-view scroll-y class="dy-scroll-nobg" @scrolltolower="scrolltolower" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'"> <view class="dy-list"> <view class="dy-list-item p201 arrow" @click="goToDetail"> <view class="dy-title-flex"> <text>污水泵</text> <text class="cu-tag radius bg-yellow light">一般隐患</text> </view> <view class="dy-subtitle"> <text>来源:主要负责人隐患排查清单</text> </view> <view class="dy-subtitle-flex"> <text>整改人:王伟东</text> <text class="text-gray f20">2021-01-06 10:11:22</text> </view> </view> <view class="dy-list-item p201 arrow" @click="goToDetail"> <view class="dy-title-flex"> <text>污水泵</text> <text class="bg-yellow light cu-tag radius">一般隐患</text> </view> <view class="dy-subtitle"> <text>来源:主要负责人隐患排查清单</text> </view> <view class="dy-subtitle-flex"> <text>整改人:王伟东</text> <text class="text-gray f20">2021-01-06 10:11:22</text> </view> </view> </view> <view class="cu-tabbar-height"></view> </scroll-view> </view> </template> <script> export default { data() { return { sTop:0, totalHeight:0 } }, onReady() { let that=this; let CustomBar = this.CustomBar; uni.getSystemInfo({ //调用uni-app接口获取屏幕高度 success(res) { //成功回调函数 let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名(class/id) titleH.boundingClientRect(data=>{ that._data.sTop=data.height //计算高度:元素高度=窗口高度-元素距离顶部的距离(data.top) that.totalHeight = data.height+CustomBar }).exec() } }) }, methods: { //跳转事件 goToDetail(e) { uni.navigateTo({ url: '/pages/application/hidden-danger-management/hidden-danger-submit/hidden-danger-submit-detail' }); }, } } </script> <style> </style>