fix: 列表左右居中 + 悬浮订单按钮放大并直达
实测修正（桌面+手机双端验证）： 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
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
a800756958
commit
73be4f7d73
@@ -53,15 +53,21 @@
|
||||
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
|
||||
@media screen and (min-width: 769px) {
|
||||
body {
|
||||
background: #dfe4ea;
|
||||
// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色
|
||||
background: #dfe4ea !important;
|
||||
}
|
||||
|
||||
uni-page-body {
|
||||
// xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中
|
||||
width: 750rpx !important;
|
||||
// xuchao: 框架默认 uni-page-body 为 display:inline，会使 width/margin 失效，先改 block
|
||||
display: block !important;
|
||||
// 不能用 rpx —— 750rpx 恒等于"整屏宽"，编译后会变成当前视口宽度而无法居中。
|
||||
// 框架在 >768px 时把 rpx 基准锁在 375（rpxCalcBaseDeviceWidth 默认值），
|
||||
// 故页面内容宽即 375px，这里用固定 375px 覆盖框架默认 width:100% 实现居中。
|
||||
width: 375px !important;
|
||||
margin: 0 auto !important;
|
||||
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 */
|
||||
|
||||
@@ -1,205 +1,95 @@
|
||||
<template name="gmy-float-touch">
|
||||
<view>
|
||||
<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">
|
||||
<image :src="mainImg" mode="aspectFill" :animation="animationData" ></image>
|
||||
<!-- <text style="font-size: 20rpx;color: #fff;">订单</text> -->
|
||||
</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>
|
||||
<!-- xuchao: 直接显示"门票订单"悬浮按钮 —— 单击直达订单列表，仍可拖拽换位 -->
|
||||
<view @touchmove.stop.prevent="doNothing">
|
||||
<view class="box" style="z-index: 999;" :style="{top:top+'px',left:left+'px'}"
|
||||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @click="onTap">
|
||||
<image :src="mainImg" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
name:"gmy-float-touch",
|
||||
data(){
|
||||
export default {
|
||||
name: "gmy-float-touch",
|
||||
data() {
|
||||
return {
|
||||
isShow:false,
|
||||
top:500,
|
||||
left:3,
|
||||
right:3,
|
||||
isleft:true,
|
||||
animationData:''
|
||||
top: 500,
|
||||
left: 3,
|
||||
moved: false, // xuchao: 区分拖拽与点击，拖拽时不触发跳转
|
||||
startX: 0,
|
||||
startY: 0
|
||||
}
|
||||
},
|
||||
props:{
|
||||
imgLists:{
|
||||
type:Array
|
||||
},
|
||||
mainImg:{
|
||||
type:String,
|
||||
default:"../../static/main.png"
|
||||
props: {
|
||||
mainImg: {
|
||||
type: String,
|
||||
default: "../../static/main.png"
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doNothing:function(){},
|
||||
show:function(){
|
||||
this.isShow = !this.isShow;
|
||||
this.spred();
|
||||
},
|
||||
touchmove:function(e){
|
||||
if(this.isShow){
|
||||
methods: {
|
||||
doNothing: function() {},
|
||||
// xuchao: 点击悬浮球直接派发订单事件（无需先展开菜单）
|
||||
onTap: function() {
|
||||
if (this.moved) {
|
||||
this.moved = false
|
||||
return
|
||||
}
|
||||
var position = e.touches[0];
|
||||
var wHeight = this.getSystemInfo('H');
|
||||
if(position.pageY>50 && position.pageY+50 < wHeight){
|
||||
this.top = position.pageY-20;
|
||||
}
|
||||
this.left = position.pageX;
|
||||
this.$emit("menuClick", 4)
|
||||
},
|
||||
touchend:function(e){
|
||||
var wWidth = this.getSystemInfo('W');
|
||||
const pageX = e.changedTouches[0].clientX;
|
||||
if(pageX > wWidth*0.5){
|
||||
this.isleft = false;
|
||||
this.left = wWidth-50;
|
||||
}
|
||||
else{
|
||||
this.isleft = true;
|
||||
this.left = 3;
|
||||
}
|
||||
|
||||
touchstart: function(e) {
|
||||
this.moved = false
|
||||
this.startX = e.touches[0].pageX
|
||||
this.startY = e.touches[0].pageY
|
||||
},
|
||||
menuClick:function(index){
|
||||
this.$emit("menuClick",index);
|
||||
touchmove: function(e) {
|
||||
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){
|
||||
var result;
|
||||
const screen = uni.getSystemInfoSync();
|
||||
const wHeight = screen.windowHeight;
|
||||
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();
|
||||
touchend: function(e) {
|
||||
var wWidth = this.getSystemInfo('W')
|
||||
// 松手时吸附到较近的一侧屏幕边缘
|
||||
this.left = e.changedTouches[0].clientX > wWidth * 0.5 ? wWidth - 56 : 3
|
||||
},
|
||||
getSystemInfo: function(type) {
|
||||
const screen = uni.getSystemInfoSync()
|
||||
return type === 'H' ? screen.windowHeight : screen.windowWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
z-index: 99;
|
||||
// margin:10upx 20upx 10upx 20upx;
|
||||
}
|
||||
.box{
|
||||
// xuchao: 按钮整体放大 25%（原 80upx → 100upx）
|
||||
.box {
|
||||
position: fixed;
|
||||
left: 5upx;
|
||||
left: 3upx;
|
||||
top: 70%;
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
// border-radius: 50%;
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: 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;
|
||||
|
||||
}
|
||||
.menu1R{
|
||||
right: 20upx;
|
||||
transition: top 0.2s, right 0.2s, opacity 0.2s;
|
||||
}
|
||||
.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;
|
||||
.box image {
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
|
||||
// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮按钮同步锚定到列左缘，避免脱离页面
|
||||
@media screen and (min-width: 769px) {
|
||||
.box {
|
||||
left: calc(50vw - 184px) !important;
|
||||
}
|
||||
.menu0, .menu0R {
|
||||
left: calc(50vw - 184px) !important;
|
||||
right: auto !important;
|
||||
}
|
||||
.menu4, .menu4R {
|
||||
left: calc(50vw - 134px) !important;
|
||||
right: auto !important;
|
||||
left: calc(50vw - 182px) !important;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<u-picker mode="selector" v-model="show1" :range="selector" @close='selectTypeInput' confirm-color='#3B94E6' range-key="label"
|
||||
@confirm='typeConfirm'></u-picker>
|
||||
<!-- xuchao: 订单悬浮按钮 -->
|
||||
<gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
|
||||
<gmy-float-touch :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -65,9 +65,6 @@
|
||||
data() {
|
||||
return {
|
||||
mainImg: "../../static/logo4.png",
|
||||
imgLists: ["../../static/logo1.png", "../../static/logo2.png", "../../static/logo3.png",
|
||||
"../../static/logo3.png", "../../static/logo5.png"
|
||||
],
|
||||
status: 'loadmore',
|
||||
keyword: '',
|
||||
transform: 'rotate(0deg)',
|
||||
|
||||
Reference in New Issue
Block a user