组件代码 components/custom-slider/index.vue
<template><viewclass="panel"@touchstart="handleTouchStart"@touchmove.stop="throttleHandleTouchMove"@touchend="handleTouchEnd":style="{ transform: `translateY(${panelTranslateY}px)` }"><view class="panel-handle"></view><view class="panel-content"><slot></slot></view></view>
</template>
<script>
function throttle(func, delay) {let timer = nullreturn function (...args) {if (!timer) {func.apply(this, args)timer = setTimeout(() => {timer = null}, delay)}}
}
export default {props: {baseHeight: {type: Number,default: 200}},data() {const { windowHeight } = wx.getSystemInfoSync()return {isDragging: false,screenHeight: windowHeight,panelTranslateY: 0,totalHeight: 0,initPanelHeight: 0,lastMoveTime: 0,lastY: 0,startY: 0,accelerationFactor: 1,elasticFactor: 0.3}},created() {this.throttleHandleTouchMove = throttle(this.handleTouchMove, 16)},methods: {getClientRect(selector) {const query = wx.createSelectorQuery().in(this)return new Promise((resolve) => {query.select(selector).boundingClientRect((rect) => {resolve(rect)}).exec()})},async initPanel() {this.resetPanel()await this.getPanel()this.panelTranslateY = this.initPanelHeight},resetPanel() {this.panelTranslateY = 0this.totalHeight = 0},async getPanel() {await this.$nextTick()const panelRect = await this.getClientRect('.panel')const { height } = panelRectthis.totalHeight = heightthis.initPanelHeight = height - this.baseHeight},handleTouchStart(e) {this.startY = e.touches[0].clientYthis.isDragging = truethis.lastMoveTime = Date.now()this.lastY = this.startYthis.accelerationFactor = 1},handleTouchMove(e) {if (this.isDragging) {const currentY = e.touches[0].clientYconst currentTime = Date.now()const deltaY = currentY - this.lastYconst deltaTime = currentTime - this.lastMoveTimeconst speed = Math.abs(deltaY / deltaTime)this.accelerationFactor = 1 + speed * 0.5const adjustedDeltaY = deltaY * this.accelerationFactorlet newTranslateY = this.panelTranslateY + adjustedDeltaYif (newTranslateY < 0) {newTranslateY = newTranslateY * this.elasticFactor} else if (newTranslateY > this.initPanelHeight) {newTranslateY =this.initPanelHeight +(newTranslateY - this.initPanelHeight) * this.elasticFactor}newTranslateY = Math.min(Math.max(newTranslateY, -this.initPanelHeight * this.elasticFactor),this.initPanelHeight + this.initPanelHeight * this.elasticFactor)this.panelTranslateY = newTranslateYthis.lastY = currentYthis.lastMoveTime = currentTime}},handleTouchEnd() {this.isDragging = falseif (this.panelTranslateY < 0) {this.panelTranslateY = 0} else if (this.panelTranslateY > this.initPanelHeight) {this.panelTranslateY = this.initPanelHeight}}}
}
</script><style scoped lang="scss">
.panel {position: absolute;left: 0;right: 0;bottom: 0;background: #fff;padding: 20rpx;border-radius: 24px 24px 0 0;box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);z-index: 30;transition: transform 0.3s ease;will-change: transform;.panel-handle {width: 60rpx;height: 6rpx;border-radius: 3rpx;background: #f0f0f0;margin: 16rpx auto 24rpx;}
}
</style>页面使用
<template><view class="index"><map style="width: 100%; height: 100%"></map><CustomSlider ref="slider"><view v-for="(item, index) in list" :key="index"><view class="item"><text>{{ item.name }}</text><text>{{ item.value }}</text></view></view></CustomSlider></view>
</template><script>
import CustomSlider from '../../components/custom-slider/index.vue'
export default {components: {CustomSlider},data() {return {list: []}},onLoad() {this.getDetail()},methods: {getDetail() {setTimeout(() => {for (let i = 0; i < 100; i++) {this.list.push({name: '商品' + i,value: '价格' + i})}this.$refs.slider.initPanel()}, 2000)}}
}
</script><style>
page {height: 100%;width: 100%;
}
</style>
<style lang="scss">
.index {height: 100%;position: relative;
}
.item {height: 40px;line-height: 40px;text-align: center;border-bottom: 1px solid #eee;
}
</style>效果展示
