xuchao/h5-meike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 列表左右居中 + 悬浮订单按钮放大并直达

Browse Source 
实测修正（桌面+手机双端验证）：
1 列表左右宽度一致：宽屏下页面列居中、两侧等宽灰底加阴影。
  踩坑：uni-page-body 框架默认 display:inline，使 width/margin 失效，需先改 block；
  且居中宽度不能用 rpx（750rpx 恒等于整屏宽，会被编译成当前视口宽），改用固定 375px
  （等于框架 >768px 锁定的 rpx 基准）；body 底色加 important 压过页面级 page 背景。
2 悬浮订单按钮：整体放大 25%（80upx 改 100upx），单击直达门票订单列表，
  去掉先点订单再点门票的两步展开菜单；保留拖拽并正确区分拖拽与点击；
  清理因此废弃的展开逻辑与无用 imgLists。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
xuchao
2026-07-21 11:15:40 +08:00
co-authored by Claude Opus 4.8
parent a800756958
commit 73be4f7d73
3 changed files with 70 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+10 -4
View File
@@ -53,15 +53,21 @@
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色 // xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
body { body {
background: #dfe4ea; // xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色
background: #dfe4ea !important;
} }
uni-page-body { uni-page-body {
// xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中 // xuchao: 框架默认 uni-page-body 为 display:inline，会使 width/margin 失效，先改 block
width: 750rpx !important; display: block !important;
// 不能用 rpx —— 750rpx 恒等于"整屏宽"，编译后会变成当前视口宽度而无法居中。
// 框架在 >768px 时把 rpx 基准锁在 375（rpxCalcBaseDeviceWidth 默认值），
// 故页面内容宽即 375px，这里用固定 375px 覆盖框架默认 width:100% 实现居中。
width: 375px !important;
margin: 0 auto !important; margin: 0 auto !important;
min-height: 100vh; min-height: 100vh;
box-shadow: 0 0 60rpx rgba(31, 45, 61, 0.14); overflow-x: hidden;
box-shadow: 0 0 24px rgba(31, 45, 61, 0.14);
} }
} }
/* #endif */ /* #endif */
components/gmy-float-touch/gmy-float-touch.vue
+58 -168
View File
@@ -1,205 +1,95 @@
<template name="gmy-float-touch"> <template name="gmy-float-touch">
<view> <!-- xuchao: 直接显示"门票订单"悬浮按钮 —— 单击直达订单列表，仍可拖拽换位 -->
<view @touchmove.stop.prevent = "doNothing" > <view @touchmove.stop.prevent="doNothing">
<view class="box" style="z-index: 999;" @click="show" :style="{top:top+'px',left:left + 'px'}" @touchmove="touchmove" @touchend="touchend"> <view class="box" style="z-index: 999;" :style="{top:top+'px',left:left+'px'}"
<image :src="mainImg" mode="aspectFill" :animation="animationData" ></image> @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @click="onTap">
<!-- <text style="font-size: 20rpx;color: #fff;">订单</text> --> <image :src="mainImg" mode="aspectFill"></image>
</view>
<!-- <view class="menu " :class="{menu0:!isShow&&isleft,menu1:isShow&&isleft ,menu1R:isShow&& !isleft ,menu0R:!isShow&& !isleft}" :style="{top:(top-75) +'px'}" @tap="menuClick(1)" >
<image :src="imgLists[0]" mode=""></image>
</view> -->
<!-- xuchao: 质惠游一期只有门票模块，仅保留"门票订单"菜单项 -->
<view class="menu " :class="{menu0:!isShow&&isleft,menu4:isShow&&isleft ,menu4R:isShow&& !isleft ,menu0R:!isShow&& !isleft}" :style="{top:top+'px'}" @tap="menuClick(4)">
<image :src="imgLists[3]" mode="aspectFill"></image>
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default{ export default {
name:"gmy-float-touch", name: "gmy-float-touch",
data(){ data() {
return { return {
isShow:false, top: 500,
top:500, left: 3,
left:3, moved: false, // xuchao: 区分拖拽与点击，拖拽时不触发跳转
right:3, startX: 0,
isleft:true, startY: 0
animationData:''
} }
}, },
props:{ props: {
imgLists:{ mainImg: {
type:Array type: String,
}, default: "../../static/main.png"
mainImg:{
type:String,
default:"../../static/main.png"
} }
}, },
methods:{ methods: {
doNothing:function(){}, doNothing: function() {},
show:function(){ // xuchao: 点击悬浮球直接派发订单事件（无需先展开菜单）
this.isShow = !this.isShow; onTap: function() {
this.spred(); if (this.moved) {
}, this.moved = false
touchmove:function(e){
if(this.isShow){
return return
} }
var position = e.touches[0]; this.$emit("menuClick", 4)
var wHeight = this.getSystemInfo('H');
if(position.pageY>50 && position.pageY+50 < wHeight){
this.top = position.pageY-20;
}
this.left = position.pageX;
}, },
touchend:function(e){ touchstart: function(e) {
var wWidth = this.getSystemInfo('W'); this.moved = false
const pageX = e.changedTouches[0].clientX; this.startX = e.touches[0].pageX
if(pageX > wWidth*0.5){ this.startY = e.touches[0].pageY
this.isleft = false;
this.left = wWidth-50;
}
else{
this.isleft = true;
this.left = 3;
}
}, },
menuClick:function(index){ touchmove: function(e) {
this.$emit("menuClick",index); var position = e.touches[0]
// 移动超过阈值才视为拖拽，避免轻触误判
if (Math.abs(position.pageX - this.startX) > 5 || Math.abs(position.pageY - this.startY) > 5) {
this.moved = true
}
var wHeight = this.getSystemInfo('H')
if (position.pageY > 50 && position.pageY + 60 < wHeight) {
this.top = position.pageY - 25
}
this.left = position.pageX - 25
}, },
getSystemInfo:function(type){ touchend: function(e) {
var result; var wWidth = this.getSystemInfo('W')
const screen = uni.getSystemInfoSync(); // 松手时吸附到较近的一侧屏幕边缘
const wHeight = screen.windowHeight; this.left = e.changedTouches[0].clientX > wWidth * 0.5 ? wWidth - 56 : 3
const wWidth = screen.windowWidth;
switch(type){
case 'H':result = wHeight;break;
case 'W':result = wWidth;break;
default: result = 'Err';
}
return result;
},
spred:function(e){
var animation = uni.createAnimation({
duration: 200,
timingFunction: 'ease',
});
this.animationData = animation.export();
if(this.isShow){
animation.rotate(135).step();
}
else{
animation.rotate(0).step();
}
this.animationData = animation.export();
}, },
getSystemInfo: function(type) {
const screen = uni.getSystemInfoSync()
return type === 'H' ? screen.windowHeight : screen.windowWidth
}
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
image{ // xuchao: 按钮整体放大 25%（原 80upx → 100upx）
width: 80upx; .box {
height: 80upx;
z-index: 99;
// margin:10upx 20upx 10upx 20upx;
}
.box{
position: fixed; position: fixed;
left: 5upx; left: 3upx;
top: 70%; top: 70%;
width: 80upx; width: 100upx;
height: 80upx; height: 100upx;
// border-radius: 50%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// background-color: rgba($color: #777, $alpha: 0.4);
} }
.menu{
color:white;
position: fixed;
width: 80upx;
height: 80upx;
// border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: rgba($color: #777, $alpha: 0.4);
}
.menu0{
left: 5upx;
opacity: 0;
transition: top 0.2s, left 0.2s, opacity 0.2s;
}
.menu1{
left: 20upx;
transition: top 0.2s, left 0.2s, opacity 0.2s;
}
.menu2{
left: 10upx;
transition: top 0.2s, left 0.2s, opacity 0.2s;
}
.menu3{
left: 205upx;
transition: top 0.2s, left 0.2s, opacity 0.2s;
}
.menu4{
left: 106upx;
transition: top 0.2s, left 0.2s, opacity 0.2s;
}
.menu5{
left: 5upx;
transition: top 0.2s, left 0.2s, opacity 0.2s;
}
.menu0R{
right: 10upx;
opacity: 0;
transition: top 0.2s, right 0.2s, opacity 0.2s;
} .box image {
.menu1R{ width: 100upx;
right: 20upx; height: 100upx;
transition: top 0.2s, right 0.2s, opacity 0.2s; z-index: 99;
}
.menu2R{
right: 20upx;
transition: top 0.2s, right 0.2s, opacity 0.2s;
}
.menu3R{
right: 210upx;
transition: top 0.2s, right 0.2s, opacity 0.2s;
}
.menu4R{
right: 106upx;
transition: top 0.2s, right 0.2s, opacity 0.2s;
}
.menu5R{
right: 20upx;
transition: top 0.2s, right 0.2s, opacity 0.2s;
} }
/* #ifdef H5 */ /* #ifdef H5 */
// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面 // xuchao: 宽屏（>768px）时页面列居中（375px），悬浮按钮同步锚定到列左缘，避免脱离页面
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.box { .box {
left: calc(50vw - 184px) !important; left: calc(50vw - 182px) !important;
}
.menu0, .menu0R {
left: calc(50vw - 184px) !important;
right: auto !important;
}
.menu4, .menu4R {
left: calc(50vw - 134px) !important;
right: auto !important;
} }
} }
/* #endif */ /* #endif */
pages/ticket/scenic.vue
+1 -4
View File
@@ -50,7 +50,7 @@
<u-picker mode="selector" v-model="show1" :range="selector" @close='selectTypeInput' confirm-color='#3B94E6' range-key="label" <u-picker mode="selector" v-model="show1" :range="selector" @close='selectTypeInput' confirm-color='#3B94E6' range-key="label"
@confirm='typeConfirm'></u-picker> @confirm='typeConfirm'></u-picker>
<!-- xuchao: 订单悬浮按钮 --> <!-- xuchao: 订单悬浮按钮 -->
<gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch> <gmy-float-touch :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
</view> </view>
</template> </template>
@@ -65,9 +65,6 @@
data() { data() {
return { return {
mainImg: "../../static/logo4.png", mainImg: "../../static/logo4.png",
imgLists: ["../../static/logo1.png", "../../static/logo2.png", "../../static/logo3.png",
"../../static/logo3.png", "../../static/logo5.png"
],
status: 'loadmore', status: 'loadmore',
keyword: '', keyword: '',
transform: 'rotate(0deg)', transform: 'rotate(0deg)',