czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
魏啾
2024-08-03 15:41:55 +08:00
parent 529a43903c
commit 2b2d6d278c
2 changed files with 30 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages.json
View File

@@ -163,10 +163,10 @@
"path": "pages/order_food/order_food",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
"navigationBarTextStyle": "balck"
}
},
{
"path": "pages/make/list",
"style": {

94
pages/order_food/order_food.vue
View File

@@ -8,7 +8,7 @@
</view>
<!-- 顶部面板 -->
<view class="top--panel">
<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity'></navseat>
<navseat :opacity='opacity' :titleshow='true'></navseat>
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
<image class="panelimgbackground" :src="shopInfo.storeInfo.coverImg" mode="aspectFill">
</image>
@@ -88,9 +88,8 @@
<!-- 滚动区域 -->
<view class="scroll-panel" id="scroll-panel">
<view class="list-box">
<view class="left">
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
:scroll-into-view="leftIntoView" :scroll-with-animation="false">
<view class="left" :style="{top: `${HeighT}px`}">
<scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false">
<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
@click="leftTap(index)">{{item.name}}</view>
@@ -98,9 +97,7 @@
</scroll-view>
</view>
<view class="main">
<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight"
:style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto"
:scroll-with-animation="false">
<view>
<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index"
:id="'item-'+index">
<view class="title">
@@ -146,7 +143,7 @@
</view>
</view>
<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
</scroll-view>
</view>
</view>
</view>
</view>
@@ -332,8 +329,7 @@
mainArray: [],
topArr: [],
leftIndex: 0,
scrollInto: '',
isFixed: true,
isFixed: false,
showShopInfo: false, //店铺信息弹窗是否显示
showShopsku: false, //多规格弹窗是否显示
skuId: null, // 多规格ID
@@ -359,14 +355,7 @@
} else {
this.opacity = true
}
this.$u.debounce(() => {
if (e.scrollTop + 20 >= this.scrollTopSize) { //控制大图层
this.isFixed = false;
} else {
this.isFixed = true;
}
}, 10)
this.mainScroll(e)
},
computed: {
/* 计算左侧滚动位置定位 */
@@ -766,8 +755,6 @@
this.showShopInfo = true;
},
/**
* 获取消息
* @param {Object} msg
@@ -852,73 +839,46 @@
let last = res[res.length - 1].height;
if (last - 20 < this.scrollHeight) {
// this.fillHeight = this.scrollHeight - last + 20; //这是吸到顶部的距离
// this.fillHeight = 200;
this.fillHeight = 200;
}
});
},
/* 主区域滚动监听 */
mainScroll(e) {
console.log(e)
// 节流方法
clearTimeout(this.mainThrottle);
this.mainThrottle = setTimeout(() => {
scrollFn();
}, 10);
let scrollFn = () => {
let top = e.detail.scrollTop;
let top = e.scrollTop;
let index = 0;
/* 查找当前滚动距离 */
for (let i = (this.topArr.length - 1); i >= 0; i--) {
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
if ((top + 2) >= this.topArr[i] - this.scrollTopSize) {
if ((top + 2) >= this.topArr[i] - this.HeighT) {
index = i;
break;
}
}
const calculateDeltas = (arr) => {
return arr.map((item, index, array) => {
if (index === 0) {
// 第一个元素前无下标，返回当前元素后下标与第一个元素的差
return array[index + 1] - item;
} else if (index === array.length - 1) {
// 最后一个元素后无下标，返回当前元素前下标与最后一个元素的差
return item - array[index - 1];
} else {
// 计算当前元素前后下标的差
return array[index + 1] - item || item - array[index - 1];
}
});
};
// 计算前后下标差
const deltas = calculateDeltas(this.topArr);
console.log(deltas);
this.leftIndex = (index < 0 ? 0 : index);
const lastElement = this.topArr[this.topArr.length - 1];
const currentElement = this.topArr[this.leftIndex];
const diff = lastElement - currentElement;
console.log(diff)
if (diff > this.scrollHeight) {
this.leftIndex = (index < 0 ? 0 : index);
} else {
this.leftIndex = this.leftIndex
}
}
},
/* 左侧导航点击 */
leftTap(index) {
let HeighTdata = null
if (this.opacity) {
HeighTdata = this.HeighT //一个导航栏高度
} else {
HeighTdata = this.HeighT * 2 //顶部的时候两个导航栏高度
}
try {
uni.pageScrollTo({
scrollTop: this.scrollTopSize + HeighTdata, //滑动需要的距离 nav+列表距离的高度
duration: 0
});
} catch (e) {
//TODO handle the exception
}
setTimeout(() => {
this.scrollInto = `item-${index}`;
this.leftIndex = (index < 0 ? 0 : index);
}, 100)
uni.pageScrollTo({
scrollTop: this.topArr[index] - this.HeighT,
duration: 0
});
this.leftIndex = index
}
}
}
@@ -1165,9 +1125,9 @@
}
.scroll-panel {
flex-grow: 1;
// flex-grow: 1;
// height: 0;
overflow: hidden;
// overflow: hidden;
}
@@ -1633,6 +1593,8 @@
line-height: normal;
box-sizing: border-box;
font-size: 32rpx;
position: sticky;
top: 0;
// padding-bottom: 200rpx;
.item {