图一 是模拟器上展示正产, 图二是在pc端mac os系统展示正常,图三是在pc端 window系统 按钮不见 真机上展示的样式都是正常的 一下是具体的计算高度代码 <template>
<view class="fill-width apply-auth" :style="{ height: state.contentHeight + 'px' }">
<scroll-view :scroll-y="true" :style="{ height: state.scrollHeight + 'px' }">
<Tree v-model:checked="state.applyList" :data="state.list" :options="state.options" @change="treeChange"></Tree>
</scroll-view>
<view class="apply-footer">
<view class="pa-6 reject-content">
<view class="apply-title"> 申请缘由<text class="red">*</text> </view>
<textarea
v-model="state.reason"
:count="false"
:maxlength="50"
class="font-16 textarea"
placeholder="填写申请的缘由、目的"
placeholder-style="font-size: 12px;"
/>
</view>
<view class="info-bottom d-flex align-center justify-center">
<AtButton
:loading="state.submitLoading"
:disabled="state.applyList.length === 0 || state.reason === ''"
type="secondary"
class="font-16 color3"
@click="submit"
>
提交申请
</AtButton>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, onMounted, defineEmits, defineProps, watch } from 'vue'
import { $post } from '@/api/http'
import URL from '@/api/url'
import './index.scss'
import { rpxTransformPx } from '@/util/index.js'
import Tree from '@/components/Tree/index'
import Taro from '@tarojs/taro'
const emit = defineEmits(['submitSuccess'])
const props = defineProps({
hasUserInfo: {
type: Boolean,
default: false
},
index: {
type: Number,
default: 0
}
})
const state = reactive({
list: [],
applyList: [],
options: {
label: 'menuName',
disabled: 'seleted',
checked: 'seleted',
extra: 'applying'
},
reason: '',
contentHeight: 300,
scrollHeight: 100,
submitLoading: false
})
watch(
() => props.hasUserInfo,
val => {
if (val) {
getData()
}
}
)
watch(
() => props.index,
val => {
if (val === 0) {
getData()
}
}
)
onMounted(() => {
Taro.eventCenter.on(Taro.getCurrentInstance().router.onShow, () => {
if (props.hasUserInfo) {
getData()
}
computedScrollContentHeight()
})
})
const computedScrollContentHeight = () => {
const { windowHeight } = Taro.getSystemInfoSync()
setTimeout(() => {
const query = Taro.createSelectorQuery()
query.select('.at-tabs__header').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
const tabHeaderHeight = res[0]?.height || 50
state.contentHeight = windowHeight - tabHeaderHeight
state.scrollHeight = windowHeight - tabHeaderHeight - rpxTransformPx(270)
})
}, 100)
}
const getData = async () => {
try {
const params = { filter: 1 }
const { data } = await $post(URL.QUERY_APPLY_MENU_TREE, params)
if (data.length > 0) {
data[0].open = true
}
data.forEach(v => {
if (v.seleted) {
v.checked = true
}
if (v.children && v.children.length > 0) {
v.children.forEach(c => {
if (c.seleted) {
c.checked = true
}
})
}
})
state.list = data
state.reason = ''
} catch (err) {
console.log(err)
}
}
const submit = async () => {
if (state.submitLoading) {
return
}
try {
state.submitLoading = true
const params = {
applyList: state.applyList.map(v => {
return {
menuName: v.menuName,
menuDirectory: '/' + v.parentName,
menuOwner: v.menuOwner,
menuCode: v.menuCode
}
}),
applyReason: state.reason
}
await $post(URL.SAVE_APPLY_INFO, params)
state.reason = ''
state.applyList = []
getData()
Taro.showToast({
title: '提交成功!',
icon: 'none',
mask: true,
duration: 3000
})
emit('submitSuccess')
} catch (err) {
console.log(err)
} finally {
state.submitLoading = false
}
}
const treeChange = list => {
state.applyList = list
}
</script>
类似的问题 搜了下社区全是没有回复