uni-app简单案例：页面实现滚动到一定位置的时候触发bactop按钮返回顶部（置顶）的功能。

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>