8***@qq.com
8***@qq.com
  • 发布:2021-05-15 14:58
  • 更新:2024-06-08 18:13
  • 阅读:1268

nvue waterfall原生组件返回顶部

分类:nvue

在解决这个问题之前,可是浪费了我好久的时间
也有其他人在发布了问题,但是没有人回答
在详细查阅文档后,还是找到了答案
确实还是对文档的不够熟悉
在此记录下,也给后面的小白找好捷径,代码已精简

    <template>  
         <waterfall column-count="2" column-width="auto" :show-scrollbar="false" :column-gap="5" :left-gap="5"  
            :right-gap="5" :bounce="false" :loadmoreoffset="500" @loadmore="loadmore" alwaysScrollableVertical="true"  
            :style="{height: contentHeight + 'px'}">  
            <header>  
                <view ref="topRef" style="height: 0;">顶部标志</view>  
            </header>  
            <!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->  
            <cell v-for="(item, index) in dataList" :key="'list_'+index">  

            </cell>  
        </waterfall>  
        <cover-view style="position: fixed;right:10rpx;bottom:20rpx;background-color: #ffe563;" @click="goTop()">  
            <text>返回顶部</text>  
        </cover-view>  
   <template>  
<script>  
    const dom = uni.requireNativePlugin('dom')  
    export default {  
        props: {  
            contentHeight: {  
                type: Number,  
                default: 800  
            }  
        },  
        data() {  
            return {  
                dataList: []  
            }  
        },  
        methods: {  
            goTop() {  
                dom.scrollToElement(this.$refs.topRef, {  
                    offset: 0  
                })  
            }  
        }  
    }  
</script>
2 关注 分享
特购 5***@qq.com

要回复文章请先登录注册

我可爱的app

我可爱的app

感謝分享
2024-06-08 18:13
f***@jis.com.cn

f***@jis.com.cn

谢谢大哥救命。
2024-02-08 23:55
涛tao

涛tao

当滑动超过1屏幕的距离,再点击返回顶部 好像就不生效了,不知道是啥情况。
2023-10-27 16:11
特购

特购

受教了!
2021-11-25 20:34
5***@qq.com

5***@qq.com

太好了 感谢
2021-05-17 08:42