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

滑动防抖

Browse Source
This commit is contained in:
魏啾
2024-08-03 10:50:00 +08:00
parent e1e501e150
commit 9605bb5499
1 changed files with 66 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
pages/order_food/order_food.vue
View File

@@ -5,7 +5,7 @@
style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
</view>
</view>
<!-- 顶部面板 -->
<view class="top--panel">
<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity'></navseat>
@@ -92,11 +92,12 @@
<view class="scroll-panel" id="scroll-panel">
<view class="list-box">
<view class="left">
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight -100 + 'px' }"
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
: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"
@tap="leftTap">{{item.name}}</view>
<view class="items"></view>
</scroll-view>
</view>
<view class="main">
@@ -364,11 +365,16 @@
} catch (e) {
//TODO handle the exception
}
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
this.isFixed = false;
} else {
this.isFixed = true;
}
this.$u.debounce(() => {
console.log(e.scrollTop, this.scrollTopSize)
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
// this.isFixed = false;
this.$set(this, 'isFixed', false);
} else {
this.$set(this, 'isFixed', true);
}
}, 10)
},
computed: {
/* 计算左侧滚动位置定位 */
@@ -519,17 +525,17 @@
* @param {Object} b
*/
shopAdd(item, index, index1, a, b) {
if ( a == "+" ){
if ( this.amountcartNumber <= 0) {
if (a == "+") {
if (this.amountcartNumber <= 0) {
this.amountcartNumber = this.amountcartNumber + item.suit;
}else {
} else {
this.amountcartNumber++;
}
} else {
if ( this.amountcartNumber > 0 ) {
if (this.amountcartNumber > 0) {
console.log(item)
if ( this.amountcartNumber <= item.suit) {
if (this.amountcartNumber <= item.suit) {
this.amountcartNumber = this.amountcartNumber - item.suit
} else {
this.amountcartNumber = this.amountcartNumber - 1;
@@ -546,7 +552,7 @@
return;
}
let num = 0;
if ( item.typeEnum == "normal") {
if (item.typeEnum == "normal") {
num = item.cartNumber + this.amountcartNumber;
} else {
num = this.skuNumber + this.amountcartNumber;
@@ -859,12 +865,14 @@
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
let last = res[res.length - 1].height;
if (last - 20 < this.scrollHeight) {
this.fillHeight = this.scrollHeight - last + 20;
this.fillHeight = this.scrollHeight - last + 20;//这是吸到顶部的距离
// this.fillHeight = 200;
}
});
},
/* 主区域滚动监听 */
mainScroll(e) {
console.log(e)
// 节流方法
clearTimeout(this.mainThrottle);
this.mainThrottle = setTimeout(() => {
@@ -887,6 +895,7 @@
},
/* 左侧导航点击 */
leftTap(e) {
console.log(this.scrollTopSize + this.HeighT,11)
try {
if (this.isFixed) {
uni.pageScrollTo({
@@ -933,12 +942,13 @@
.top--panel {
padding: 0 20rpx;
background-color: #fff;
.panelimgbackground {
width: 382rpx;
margin: 82rpx auto 0 auto;
height: 158rpx;
}
.panelone {
margin-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -946,7 +956,7 @@
font-size: 32rpx;
color: #333333;
}
.paneltow {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -954,7 +964,7 @@
font-size: 24rpx;
color: #999999;
}
.panelthere {
margin-top: 32rpx;
margin-bottom: 50rpx;
@@ -962,14 +972,14 @@
font-weight: 400;
font-size: 24rpx;
color: #999999;
.paneltheretext {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #999999;
}
.flex-start {
view {
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -979,31 +989,34 @@
}
}
}
.panelfour {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.panelfive {
width: 100%;
.panelfive_list{
.panelfive_list {
display: flex;
}
.panelfiveitem {
margin-top: 16rpx;
width: 340rpx;
margin-right: 30rpx;
position: relative;
flex-shrink: 0;
.panelfiveitemimage {
border-radius: 20rpx 20rpx 0rpx 0rpx;
width: 100%;
height: 204rpx;
}
.panelfiveitemone {
margin-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1011,7 +1024,7 @@
font-size: 28rpx;
color: #333333;
}
.panelfiveitemtow {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1019,13 +1032,13 @@
font-size: 24rpx;
color: #FF534B;
}
.panelfiveitemthere {
margin-top: 12rpx;
// text:nth-child(1) {
// margin-left: 0;
// }
text {
padding: 4rpx 24rpx;
background: #F6F6F6;
@@ -1036,7 +1049,7 @@
color: #999999;
}
}
.panelfiveitemfour {
margin-top: 12rpx;
width: 100%;
@@ -1050,7 +1063,7 @@
font-size: 24rpx;
color: #999999;
}
.panelfiveitemfive {
margin-top: 8rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1058,9 +1071,9 @@
font-size: 24rpx;
color: #999999;
}
.panelfiveitemsex {
.panelfiveitemsex_oen {
text:nth-child(1) {
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1068,19 +1081,21 @@
font-size: 24rpx;
color: #333333;
}
text:nth-child(2) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
text:nth-child(3) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 36rpx;
color: #333333;
}
text:nth-child(4) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@@ -1089,7 +1104,8 @@
}
}
}
.panelfiveitemNum{
.panelfiveitemNum {
// position: absolute;
// bottom: 82rpx;
// right: 0;
@@ -1097,17 +1113,20 @@
display: flex;
align-items: center;
justify-content: flex-end;
.sku-wrap{
.sku-wrap {
width: 138rpx;
height: 54rpx;
background: #E3AD7F;
border-radius: 32rpx;
position: relative;
align-items: center;
.t{
.t {
font-size: 28rpx;
color: #fff;
}
.dot {
position: absolute;
top: -15rpx;
@@ -1123,11 +1142,12 @@
font-size: 20rpx;
}
}
.Controls{
.Controls {
display: flex;
align-items: center;
.num{
.num {
margin: 8rpx 8rpx 0 8rpx;
}
}
@@ -1666,6 +1686,14 @@
}
}
.items {
height: 180rpx;
position: relative;
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
.fill-last {
height: 0;
width: 100%;