更新记录

1.2.1（2023-09-01）

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

1.2.0（2023-09-01）

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

1.1.1（2022-02-10）

去除火箭模式的默认背景色

平台兼容性

zero-back-top

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

使用方法

导入 uni_modules 后直接使用即可

<template>
    <view>
        <view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
        </view>
        <!-- 默认用法-->
      <zero-back-top :scrollTop='scrollTop'></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>

参数说明

插件预览:

小程序搜索: zerojs零技术

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