更新记录

1.3.0（2024-08-07） 下载此版本

增加 slot 自定义插槽

fix: 修复回到顶部动画结束时图标闪烁

1.2.1（2023-09-01） 下载此版本

• 兼容vue3
• 删除不必要文件

1.2.0（2023-09-01） 下载此版本

• 支持vue3使用
• 优化显示效果
• 增加图标类型
• 增加控制高斯模糊,按钮阴影可选参数

平台兼容性

uni-app

其他

zero-back-top

仅测试于 vue2, vue3, 微信小程序. 其他平台可自行测试

1. 使用方法

导入 uni_modules 后直接使用即可

<template>
    <view>
        <view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
        </view>
        <!-- 默认用法-->
      <zero-back-top :scrollTop='scrollTop'></zero-back-top>

        <!-- slot用法-->
      <zero-back-top :scrollTop='scrollTop'> top </zero-back-top>

      <!-- 或 : 自定义位置-->
      <zero-back-top :bottom="bottom" :right="right" :scrollTop='scrollTop'></zero-back-top>

      <!-- 或 : 自定义样式 1-->
      <zero-back-top iconType='arrow-line' color="#ffffff" backgroundColor='rgba(0,0,0,0.6)' :scrollTop='scrollTop'></zero-back-top>

      <!-- 或 : 自定义样式 2-->
      <zero-back-top iconType='triangle-text' color="#ffffff" backgroundColor='linear-gradient(to right, #f12711, #f5af19);' :scrollTop='scrollTop'></zero-back-top>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                right: 50,
                bottom: 100,
            }
        },
        onLoad() {

        },
        // 别忘了在使用页面监听 onPageScroll
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>

</style>

2. 参数说明

插件预览:

小程序搜索: zerojs 零技术

预览的小程序不一定能及时更新当前插件