root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 1 month ago
parent
3b7b765a3d
commit
0be70d78bd
1 changed files with 81 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 103
      pages/index/index.vue

103
pages/index/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="page1" :class="{'is-sticky': lastScrollTop>stickyTrigger}">
<view class="swiper-container">
<view class="swiper-page" v-if="currentIndex == 0">
<view class="swiper-page" v-show="currentIndex == 0">
<view style="position: relative;height: 545rpx;">
<view style="width:100%;height: 260rpx;position: fixed;top: 0;background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;z-index: 90;"
v-if="lastScrollTop>stickyTrigger"></view>
@ -459,6 +459,7 @@
</view>
<view class="dispatch-action-box" :class="{'dispatch-action-box--single': checked != 'zhipai'}">
<view class="qiangdan-btn" :id="'swipe-order-' + item.id"
:class="{'qiangdan-btn--swiping': swipeOrder.id === item.id && swipeOrder.index === index, 'qiangdan-btn--low-perf': swipeOrderLowPerf}"
@tap.stop="noop"
@touchstart.stop="startSwipeOrder($event,item,index)"
@touchmove.stop.prevent="moveSwipeOrder"
@ -790,9 +791,10 @@
getshopArea: [],
putshopArea: [],
totalPages: 1,
swipeOrderLowPerf: false,
swipeOrderDefaultStyle: {
progress: 'width: 0%;',
thumb: 'left: 0%; transform: translateX(-0%);'
progress: 'transform: translate3d(0, 0, 0) scaleX(0); transition: transform 0.14s ease-out;',
thumb: 'transform: translate3d(0, 0, 0); transition: transform 0.14s ease-out;'
},
swipeOrder: {
id: '',
@ -800,8 +802,8 @@
startX: 0,
startProgress: 0,
progress: 0,
progressStyle: 'width: 0%;',
thumbStyle: 'left: 0%; transform: translateX(-0%);',
progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
trackWidth: 0,
confirmed: false
}
@ -908,10 +910,7 @@
}
},
onShow() {
this.indexInit()
this.$nextTick(() => {
this.refreshDaimaiStickyPosition()
})
this.runHomeInit()
if (this.pendingTabIndex !== null) {
const tabIndex = this.pendingTabIndex
this.pendingTabIndex = null
@ -927,6 +926,13 @@
}, 500);
},
methods: {
runHomeInit() {
// 保证首页数据实时：每次显示首页都重新初始化数据。
this.indexInit()
this.$nextTick(() => {
this.refreshDaimaiStickyPosition()
})
},
refreshDaimaiStickyPosition() {
const query = uni.createSelectorQuery().in(this);
query.select('#menuList').boundingClientRect(rect => {
@ -1013,6 +1019,12 @@
const info = uni.getSystemInfoSync();
this.navBarHeight = info.statusBarHeight;
this.swipeOrderBaseWidth = info.windowWidth * 0.86;
this.swipeOrderThumbWidth = uni.upx2px ? uni.upx2px(82) : 41;
const iosVersionMatch = info.platform === 'ios' && info.system ? String(info.system).match(/\d+/) : null;
const iosMajorVersion = iosVersionMatch ? Number(iosVersionMatch[0]) : 0;
this.swipeOrderLowPerf = iosMajorVersion >= 26;
this.swipeOrderFrameGap = info.platform === 'ios' ? (this.swipeOrderLowPerf ? 36 : 24) : 16;
this.swipeOrderProgressStep = info.platform === 'ios' ? (this.swipeOrderLowPerf ? 4 : 2) : 1;
},
clearCheck() {
this.checkYongjin = false
@ -1052,14 +1064,16 @@
if (!this.requireLogin(0)) return
const touch = event.touches && event.touches[0]
if (!touch) return
this._swipeOrderProgress = 0
this._swipeOrderLastRenderTime = 0
this.swipeOrder = {
id: item.id,
index,
startX: touch.clientX,
startProgress: 0,
progress: 0,
progressStyle: 'width: 0%;',
thumbStyle: 'left: 0%; transform: translateX(-0%);',
progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
trackWidth: this.swipeOrderBaseWidth || 0,
confirmed: false
}
@ -1077,6 +1091,16 @@
const trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 1
const deltaX = Math.max(0, touch.clientX - this.swipeOrder.startX)
const progress = Math.min(100, Math.round(deltaX / (trackWidth * 0.72) * 100))
this._swipeOrderProgress = progress
const now = Date.now()
const frameGap = this.swipeOrderFrameGap || 16
const progressStep = this.swipeOrderProgressStep || 1
if (now - (this._swipeOrderLastRenderTime || 0) < frameGap &&
Math.abs(progress - this.swipeOrder.progress) < progressStep &&
progress < 92) {
return
}
this._swipeOrderLastRenderTime = now
this.setSwipeOrderProgress(progress)
},
//滑动结束
@ -1086,7 +1110,8 @@
return
}
if (this.swipeOrder.id !== item.id || this.swipeOrder.index !== index) return
if (this.swipeOrder.progress >= 92 && !this.swipeOrder.confirmed) {
const progress = this._swipeOrderProgress !== undefined ? this._swipeOrderProgress : this.swipeOrder.progress
if (progress >= 92 && !this.swipeOrder.confirmed) {
this.swipeOrder.confirmed = true
this.setSwipeOrderProgress(100)
this.getOrder(item, index)
@ -1095,24 +1120,28 @@
this.resetSwipeOrder()
},
resetSwipeOrder() {
this._swipeOrderProgress = 0
this._swipeOrderLastRenderTime = 0
this.swipeOrder = {
id: '',
index: -1,
startX: 0,
startProgress: 0,
progress: 0,
progressStyle: 'width: 0%;',
thumbStyle: 'left: 0%; transform: translateX(-0%);',
progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
trackWidth: 0,
confirmed: false
}
},
setSwipeOrderProgress(progress) {
if (this.swipeOrder.progress === progress) return
const progressValue = progress + '%'
const trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 0
const thumbWidth = this.swipeOrderThumbWidth || 0
const thumbOffset = Math.max(0, trackWidth - thumbWidth) * progress / 100
this.swipeOrder.progress = progress
this.swipeOrder.progressStyle = 'width: ' + progressValue + ';'
this.swipeOrder.thumbStyle = 'left: ' + progressValue + '; transform: translateX(-' + progressValue + ');'
this.swipeOrder.progressStyle = 'transform: translate3d(0, 0, 0) scaleX(' + (progress / 100) + '); transition: none;'
this.swipeOrder.thumbStyle = 'transform: translate3d(' + thumbOffset + 'px, 0, 0); transition: none;'
},
noop() {},
pageshow(){
@ -1720,7 +1749,7 @@
switch (index) {
case 0:
this.indexInit()
this.runHomeInit()
break;
case 1:
that.$refs.deLiveryPage.init()
@ -2535,7 +2564,7 @@
margin-left: auto;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(255, 117, 88, 0.14);
/* background: rgba(255, 117, 88, 0.14); */
color: #ff6a42;
font-size: 20rpx;
font-weight: 900;
@ -2974,7 +3003,7 @@
bottom: 12rpx;
height: 8rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(27, 191, 156, 0.42) 0%, rgba(255, 220, 120, 0.64) 58%, rgba(255, 255, 255, 0.24) 100%);
/* background: linear-gradient(90deg, rgba(27, 191, 156, 0.42) 0%, rgba(255, 220, 120, 0.64) 58%, rgba(255, 255, 255, 0.24) 100%); */
z-index: 1;
}
@ -3501,13 +3530,42 @@
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.qiangdan-btn--swiping {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 6rpx 14rpx rgba(0, 35, 28, 0.04);
}
.qiangdan-btn--swiping .qiangdan-progress {
background: rgba(108, 226, 202, 0.52);
}
.qiangdan-btn--swiping .qiangdan-thumb {
box-shadow: 0 4rpx 12rpx rgba(0, 35, 28, 0.1);
}
.qiangdan-btn--low-perf {
box-shadow: none;
}
.qiangdan-btn--low-perf .qiangdan-progress {
background: rgba(108, 226, 202, 0.42);
}
.qiangdan-btn--low-perf .qiangdan-thumb {
box-shadow: none;
}
.qiangdan-progress {
width: 100%;
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(166, 255, 234, 0.42) 0%, rgba(108, 226, 202, 0.78) 100%);
transition: width 0.16s ease-out;
transform: translate3d(0, 0, 0) scaleX(0);
transform-origin: left center;
will-change: transform;
backface-visibility: hidden;
}
.qiangdan-text {
@ -3541,7 +3599,8 @@
color: #1b7a69;
font-size: 28rpx;
font-weight: 900;
transition: left 0.16s ease-out, transform 0.16s ease-out;
will-change: transform;
backface-visibility: hidden;
}
.dispatch-action-box {

Write Preview
Loading…
Cancel
Save