收藏
回答

企微小程序在pc端打开 (window系统)样式错乱

图一  是模拟器上展示正产, 图二是在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
  },
  // 当前tab页
  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()
  })
})


// 计算scrollView高度
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>


回答关注问题邀请回答
收藏

1 个回答

  • missile翾
    missile翾
    09-01

    类似的问题 搜了下社区全是没有回复


    09-01
    有用
    回复
登录 后发表内容