この記事はuniappプロジェクトでページバック効果を実現する方法についての記事です。以下はコードです (「先頭に戻る」は複数のページで使用する必要がある場合があります。コンポーネントにカプセル化することをお勧めします)。
1. 方法 1
<template>
<view class="content">
<view class="" v-for="(item,index) in 100" :key="index">
{
{index}}
</view>
<view class="upward" v-if="isShow" @click="Totop()">
<u-icon name="arrow-upward" color="#434343" size="28"></u-icon>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow:false,
}
},
onPageScroll(e){
// 监听页面滚动
if(e.scrollTop>200){
this.isShow=true;
}else{
this.isShow=false;
}
},
methods: {
Totop(){
uni.pageScrollTo({
scrollTop: 0,//滚动到页面的目标位置
duration: 300
});
}
}
}
</script>
<style lang="less">
.content{
width: 100%;
position: relative;
.u-tabs{
width: 100%;
// margin: 18rpx auto;
height: 80rpx;
display: flex;
align-items: center;
background-color: #fff;
}
.upward{
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
border: 3rpx solid #d0d0d0;
margin-bottom: 20rpx;
background-color: rgba(255, 255, 255, 0.4);
position: fixed;
bottom: 300rpx;
right: 30rpx;
}
}
</style>
onPageScroll はページのライフサイクルであり、ページのスクロールを監視します。パラメータは Object です。
uni.pageScrollTo 関連パラメータは公式ドキュメントで確認できます
エフェクト画像(ページスクロール距離が200を超え、戻るボタンが表示される)
2. uView コンポーネントを使用する
<template>
<view class="wrap">
<text>滑动页面,返回顶部按钮将出现在右下角</text>
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
}
};
</script>
<style lang="scss" scoped>
.wrap {
height: 200vh;
}
</style>