ZF sun
de52406be8
1. 新增全局CSS变量管理浮动按钮和侧边导航的尺寸参数，实现多组件样式同步 2. 重构to-top.vue和hover-nav.vue，改用CSS变量驱动布局，修复多平台适配问题 3. 新增多语言切换弹窗与智能切换逻辑，优化多语言展示与配置能力 4. 修复原容器高度计算的硬编码适配问题，改用rpx单位实现全平台自适应
66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<!-- 回到顶部的按钮 -->
|
|
<template>
|
|
<image
|
|
class="mescroll-totop"
|
|
:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out']"
|
|
:src="$util.img('public/uniapp/common/mescroll-totop.png')"
|
|
mode="widthFix"
|
|
@click="toTopClick"
|
|
show-menu-by-longpress/>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: true
|
|
};
|
|
},
|
|
methods: {
|
|
toTopClick() {
|
|
this.$emit('toTop'); // 派发点击事件
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 回到顶部的按钮
|
|
* ------------------------------------------------------------
|
|
* 关键尺寸(right/bottom/width)改用全局 CSS 变量驱动,
|
|
* 权威源在 App.vue 的 :root 定义。hover-nav.vue 的 JS 会读取
|
|
* 同一组变量计算自身位置,保证两组件的相对关系始终一致。
|
|
* 这里给每个 var() 都加 hardcoded fallback,
|
|
* 防止 CSS 变量因某种原因未挂上时按钮定位完全失效。
|
|
* ------------------------------------------------------------ */
|
|
.mescroll-totop {
|
|
z-index: 2147483647;
|
|
position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
|
|
right: var(--top-btn-right, 46rpx) !important;
|
|
bottom: var(--top-btn-bottom, 272rpx) !important;
|
|
width: var(--top-btn-size, 72rpx);
|
|
height: var(--top-btn-size, 72rpx);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: opacity 0.5s; /* 过渡 */
|
|
margin-bottom: var(--window-bottom); /* css变量 */
|
|
}
|
|
|
|
/* 适配 iPhoneX */
|
|
.mescroll-safe-bottom {
|
|
margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
|
|
margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* 显示 -- 淡入 */
|
|
.mescroll-totop-in {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 隐藏 -- 淡出且不接收事件*/
|
|
.mescroll-totop-out {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|