复现代码:
**index.vue**
<template>
<view class="content">
<button type="primary" class="content-btn" @click="onJump">页面跳转</button>
<scroll-view scroll-y="true" class="scroll-view" :scroll-into-view="scrollIntoView">
<view v-for="item in 100" class="scroll-item" :id="scrollIntoView + i">
{{item}}
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: [],
scrollIntoView: ''
}
},
onShow() {
this.scrollTop = [];
this.scrollIntoView = 'scrollIntoView0';
this.getNodeInfo();
},
methods: {
getNodeInfo() {
console.log(this.scrollIntoView);
const query = uni.createSelectorQuery().in(this);
query.selectAll('.scroll-item').boundingClientRect(data => {
data.forEach(item => {
this.scrollTop.push(item.top);
});
}).exec();
console.log(">>>>>", this.scrollTop);
},
onJump() {
uni.navigateTo({
url: '../home/home'
});
}
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.scroll-view {
flex-grow: 1;
background-color: #51A97D;
padding: 10rpx 0;
height: 1px;
}
.scroll-item {
display: flex;
justify-content: center;
align-items: center;
height: 100rpx;
margin: 20rpx;
font-size: 50rpx;
background-color: #FFF;
border-radius: 30rpx;
}
.content-btn {
flex-shrink: 0;
}
</style>
home.vue
<template>
<view>
<button type="default" @click="onBack">返回上一页</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
onBack() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style>
</style>