|
用了一个临时的解决办法,处理这个问题,特发出来提供给其他有需要的人
无非就是判断这里的顶部往下一点,不管用什么办法?判断手机型号也好,判断屏幕尺寸的办法(我就用这个办法)也好
控制顶部这种情况下下来一段距离(用尺寸对比办法计算出来下撤40px)
具体代码放出来给有需要的人看(原来和vue写法一模一样,点个赞)
也可以封到独立组件里 等兼容了就可以直接从组件里去掉这段代码了
- <template name='tpl'>
- <view class="page">
- <safe-area class="header">
- <text :style="{ paddingTop: headerTop + 'px' }">页面标题</text>
- </safe-area>
- </view>
- </template>
- <script>
- export default {
- name: 'tpl',
- apiready(){
- //like created
- },
- data() {
- return{
- }
- },
- computed: {
- headerTop() {
- // 经过逻辑判断,正常情况下设0,特殊需要兼容的屏幕尺寸使用40
- return '40'
- }
- },
- methods: {
- }
- }
- </script>
- <style>
- .page {
- height: 100%;
- }
- </style>
复制代码
|
|