<template>
<view class="demo">
<scroll-view class="scroll-view" scroll-y :scroll-into-view="scrollIntoViewId" @scroll="onScroll">
<view class="mainBox" id="mainBoxId">
<view v-for="(item,index) in 100" :key="index">
<view class="margin-bottom80">测试{{index+1}}</view>
</view>
</view>
</scroll-view>
<image src="https://jmqx-mall.oss-cn-qingdao.aliyuncs.com/image/947d2347-148d-4a9f-b619-63774b492c5b.png"
mode="aspectFill" class="topImg" @click="goTop" v-if="isShow"></image>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
description: "测试监听标签点击返回顶部",
isShow: false,
scrollIntoViewId: '', // 滚动到的目标标签ID
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
//组件创建
created() {
},
// 页面加载
onLoad(e) {
},
// 页面显示
onShow() {
},
// 方法
methods: {
onScroll(event) {
this.scrollIntoViewId = ''; //清空-设置目标标签ID为需要滚动到顶部的标签ID
// 处理滚动事件
console.log('滚动位置：', event.detail.scrollTop);
if (event.detail.scrollTop > 300) {
this.isShow = true;
} else {
this.isShow = false;
}
},
goTop() {
this.scrollIntoViewId = 'mainBoxId'; // 设置目标标签ID为需要滚动到顶部的标签ID
},
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>
<style lang="scss" scoped>
.demo {
width: 100%;
height: 100vh;
overflow: hidden;
.scroll-view {
margin-top: 180rpx;
height: calc(100vh - 180rpx);
}
.mainBox {
flex: 1;
margin-bottom: 300rpx;
}
.topImg {
width: 60rpx;
height: 60rpx;
position: fixed;
bottom: 100rpx;
right: 10rpx;
}
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106