1.效果预览：
2.功能实现
具体功能：用户向下滚动到一定的位置的时候，会在右下角触发一个icon图标，然后点击小图标，直接返回顶部位置。
onPageScroll 生命周期函数：监听页面实时滚动的当前位置。
uni.pageScrollTo:强制指定当前页面位置。
三元运算符用来控制用户滑动到某个位置的时候显示按钮的icon图标，不到这个位置的时候让它隐藏起来。
3.index.vue代码：
<template>
<view class="content">
<view class="group" v-for="(item,index) in CityList" :key="index">
<view class="province">
{{item.province}}
</view>
<view class="city" v-for="(city,idx) in item.data" :key="idx">
{{city}}
</view>
</view>
<image :class="[scrollTop?'active':'']" class="backtop_icon" src="../../static/backtop.png" @tap="backtop()"></image>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop:0,
CityList: [{
"province": "广东省",
"data": [
"广州市",
"深圳市",
"江门市",
"佛山市",
"鹤山市",
"珠海市",
"茂名市",
"阳江市",
"汕头市",
"汕尾市",
"清远市",
"河源市",
"罗浮市"
]
}, {
"province": "广西省",
"data": [
"南宁市",
"崇左市",
"北海市",
"岑溪市",
"贺州市",
"梧州市",
"桂林市",
"河池市",
"南宁市",
"贵港市"
]
},
{
"province": "贵州省",
"data": [
"贵阳市",
"遵义市",
"六盘水市",
"安顺市",
"铜仁市"
]
},
{
"province": "云南省",
"data": [
"昆明市",
"曲靖市",
"丽江市",
"普洱市",
"玉溪市",
"香格里拉市",
"大理市"
]
}
]
}
},
methods: {
backtop:function() {
uni.pageScrollTo({
//实现返回顶部的功能
scrollTop:0,
duration:300
})
}
},
onPageScroll: function(e) {
//实时监听页面当前滚动位置
console.log("滚动距离顶部的位置为：" + e.scrollTop);
this.scrollTop = e.scrollTop > 400
this.scrollTop = e.scrollTop > 600
},
}
</script>
<style>
.content {
height: 100vh;
}
.province {
font-size: 18px;
font-weight: bolder;
height: 30upx;
line-height: 30upx;
background-color: rgb(247,247,247);
padding: 20upx;
}
.city {
padding: 40upx;
line-height: 30upx;
height: 30upx;
border-bottom: 1upx solid rgb(231,231,231);
}
.backtop_icon {
position: fixed;
right: 10upx;
bottom: 100upx;
height: 100upx;
width: 100upx;
display: none;
}
.active {
display: block;
}
</style>
