首先，在
uniapp中使用nvue来写一个可复用的上下滑动橡皮筋效果
页面需要先创建一个nvue
页面，然后在该
页面中实现上下滑动橡皮筋效果。
下面是一个示例代码：
```vue
<template>
<scroll-view class="scroll-view" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="80" :refresher-default-style="true" :refresher-background="refresherBackground" @refresherrefresh="onRefresh" @scroll="onScroll">
<div class="content">
<!--
页面内容 -->
</div>
</scroll-view>
</template>
<script>
export default {
data() {
return {
refresherBackground: '#f9f9f9', // 下拉刷新背景颜色
refresherDefaultStyle: true, // 下拉刷新默认样式
refresherThreshold: 80, // 下拉刷新阈值
startY: 0, // 滑动开始位置
endY: 0, // 滑动结束位置
lastMoveY: 0, // 上一次滑动Y位置
isTop: true, // 是否在顶部
isBottom: false, // 是否在底部
isMoving: false, // 是否正在滑动
contentHeight: 0, // 内容高度
scrollViewHeight: 0, // scroll-view高度
maxTopHeight: 80, // 最大顶部高度
maxBottomHeight: 80 // 最大底部高度
}
},
methods: {
onRefresh() {
// 下拉刷新
处理
// ...
},
onScroll(e) {
// 滑动
处理
if (e.detail.deltaY > 0) {
// 向下滑动
if (this.isTop) {
// 在顶部
if (this.isMoving) {
// 正在滑动
this.endY = e.detail.scrollTop
let moveY = this.endY - this.startY
if (moveY > this.maxTopHeight) {
moveY = this.maxTopHeight
}
this.$refs.refresher.style.transform = `translateY(${moveY}px)`
this.$refs.refresher.style.opacity = `${moveY / this.maxTopHeight}`
} else {
// 开始滑动
this.isMoving = true
this.startY = e.detail.scrollTop
}
}
} else if (e.detail.deltaY < 0) {
// 向上滑动
if (this.isBottom) {
// 在底部
if (this.isMoving) {
// 正在滑动
this.endY = e.detail.scrollTop
let moveY = this.lastMoveY + (this.endY - this.startY)
if (moveY < -this.maxBottomHeight) {
moveY = -this.maxBottomHeight
}
this.$refs.refresher.style.transform = `translateY(${moveY}px)`
this.$refs.refresher.style.opacity = `${-moveY / this.maxBottomHeight}`
} else {
// 开始滑动
this.isMoving = true
this.startY = e.detail.scrollTop
}
}
}
this.lastMoveY = this.$refs.refresher.style.transform.
replace(/[^\d.-]/g, '')
if (e.detail.scrollTop === 0) {
this.isTop = true
this.isBottom = false
} else if (e.detail.scrollTop + this.scrollViewHeight === this.contentHeight) {
this.isTop = false
this.isBottom = true
} else {
this.isTop = false
this.isBottom = false
}
}
},
mounted() {
// 获取scroll-view和内容的高度
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select('.content').boundingClientRect((res) => {
this.contentHeight = res.height
}).exec()
uni.createSelectorQuery().in(this).select('.scroll-view').boundingClientRect((res) => {
this.scrollViewHeight = res.height
}).exec()
})
}
}
</script>
<style>
.scroll-view {
height: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
```
在该代码
中，我们
使用了scroll-view组件来实现上下滑动效果，通过监听scroll事件来进行滑动
处理。在滑动过程
中，我们通过改变refresher的transform和opacity属性来实现橡皮筋效果。
其
中，refresher是scroll-view自带的下拉刷新组件，我们通过设置refresher-enabled、refresher-threshold和refresher-default-style等属性来禁用下拉刷新样式，并修改refresherBackground为自定义的下拉刷新背景颜色。
通过设置isTop和isBottom属性来判断当前是否在顶部和底部，从而实现橡皮筋效果的触发。我们还设置了maxTopHeight和maxBottomHeight来限制橡皮筋效果的最大高度。
最后，在mounted
中通过
uni.createSelectorQuery获取scroll-view和内容的高度，用于后续的滑动
处理。
这样，我们就实现了一个高性能的可复用的上下滑动橡皮筋效果
页面。
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
