TnPopup 在页面中会导致页面错乱 系统ios 微信小程序 代码如下

[dabao12i]

<script setup> import { ref, getCurrentInstance } from 'vue' import { onShow } from '@dcloudio/uni-app'; import { tnNavPage } from '@/utils/index' import Tag from "./components/tab" import One from './components/one.vue'; import Two from './components/two.vue'; import Popup from './components/Popup.vue'; const proxy = getCurrentInstance().proxy const mt = ref('83px') const ishide = ref(false) const showPopup = ref(false) const tabtype = ref(2) const query = uni.createSelectorQuery().in(proxy); function tnNavBack () { const indexPageUrl = '/pages/index/index' // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页 const pages = getCurrentPages() if (pages?.length) { const firstPage = pages[0] if ( pages.length === 1 && (!firstPage.route || firstPage?.route != indexPageUrl) ) { return tnNavPage(indexPageUrl, 'reLaunch') } else { uni.navigateBack({ delta: 1, }) } } else { return tnNavPage(indexPageUrl, 'reLaunch') } } onShow(() => { query.select('#header1').boundingClientRect().exec((res) => { console.log('header', res); const item = res.find(item => item.id == 'header1') if (item) { mt.value = item.height + item.top - 5 + "px" } }) query.select('#textbox').boundingClientRect().exec((res) => { console.log('box', res); const item = res.find(item => item.id == 'textbox') if (item) { ishide.value = item.height > 57 } }) }) </script> 医生主页

关注 杨少杰 主治医师 从业15年 擅长儿科 知名医院 尽管张辽很有名气，但他还是不算曹魏最优秀的将领，如果给曹魏将领弄个能力排行榜，甚至张辽难以挤进前十。 首先逍遥津之战名气大，张辽打得也非常漂亮，但逍遥津之战影响并不大。张辽是击败“十万吴军”而不是消灭“十万吴军”，逍遥津之战后孙权又攻打了三次合肥，很显然逍遥津之战未能给予东吴造成重创，或则打消孙权攻打合肥的决心。 况且击败孙权的也不止张辽一人，陈登、文聘、满宠、司马懿曹魏将领均在防御东吴的战争中击败过孙权。逍遥津也不是孙权首次或则唯一一次战败，大家也知道孙权的军事水平谈不上杰出。尤其是在防御战中击败孙权的含金量并不高。 其次，逍遥津之战中击败孙权也并非张辽靠张辽一人之力，很多人忽略了李典、乐进。尤其是在冲击孙权本阵过程中，是张辽和李典二人一同带领八百壮士突袭，所以“八百破十万”也有李典一半份儿。 《三国志.张辽传》：李典亦与辽同。于是辽夜募敢从之士，得八百人，椎牛飨将士，明日大战。平旦，辽被甲持戟，先登陷陈，杀数十人，斩二将，大呼自名，冲垒入，至权麾下。权大惊。

            <view class="flex-c-c" v-if="ishide" style="padding: 15rpx 0;">
                <text style="color: #5597f0;">查看详细</text>
            </view>
        </view>

        <button class="footer-btn"> 用药咨询</button>

    </view>
    <tn-popup v-model="showPopup">
        <view class="tn-p-lg"> 弹框内容 </view>
    </tn-popup>
</view>

<style lang="scss" scoped> .page { height: 100vh; background-color: #f8f8f8; background: #f8f8f8; padding-bottom: 2vh; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; overflow: hidden; box-sizing: border-box; } .com { background-color: #fff; width: calc(100vw - 40rpx); border-radius: 17rpx; margin: 0 auto; } .header { height: auto; margin-top: 60rpx; position: relative; .avator { border-radius: 50%; position: absolute; width: 130rpx; height: 130rpx; border: 1px solid #fff; left: 30rpx; top: -49rpx; } } .btn { margin-left: auto; width: 140rpx; height: 70rpx; border-radius: 60rpx; background-color: #66cf84; font-size: 28rpx; line-height: 70rpx; color: #fff; margin: 20rpx; } .hide { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .box { width: calc(100vw - 40rpx); margin: 0 auto; background-color: #fff; border-radius: 17rpx; overflow-y: auto; padding: 20rpx 30rpx; } .footer-btn { width: calc(100vw - 40rpx); border-radius: 80rpx; margin: 20rpx auto; background-color: #4c92f0; color: #fff; } </style>