uni-app:使用uni-list显示列表数据之四：返回顶部(hbuilderx 3.6.18)

<template>
    <view>
        <uni-list>
            <uni-list-item :border="false" v-for="(item, index) in itemList" :key="index">
                <template v-slot:body >
                    <view @click="goItem(item.id)" v-if="item.id==5" style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #ffeeee;display: flex;flex-direction: row;" >
                      <image style="width: 100%;" mode="aspectFit" src="https://imgs.lhdtest.com/ware/sowhatimg/ware/orig/2/39/39383.jpg" />
                    </view>
                    
                    <view @click="goItem(item.id)" v-else style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #efefef;display: flex;flex-direction: row;" >
                        <view style="width:490rpx;padding-left: 20rpx;padding-right: 20rpx;">
                            <view style="height:100%;width:510rpx;display: flex;flex-direction: column;justify-content: center;">
                                {{item.title}}
                            </view>
                        </view>
                        <view style="width:200rpx;display: flex;flex-direction: column;justify-content: center;">
                            {{item.author}}
                        </view>
                    </view>
                </template>
            </uni-list-item>
            <uni-load-more :showIcon="true" :showText="true" :status="loadStatus" ></uni-load-more>
        </uni-list>
        
        <view ref="goTopButton" :animation="animationData" class="btn" @tap="toTop"  >
            <text class="cuIcon-top">返回顶部</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                itemList:[],      //列表项数组
                isLoading:false,  //是否加载中
                currentPage:1,    //当前页
                totalPage:1,      //总页数
                loadStatus:"loading",   //uni-load-more的状态
                animationData:{},  // 动画
                goTopDisp:false,   //是否显示返回顶部的button
            }
        },
        methods: {
            //上拉加载更多
            loadMore:function() {
                if (this.currentPage < this.totalPage) {
                    if(!this.isLoading){  //此处判断，上锁，防止重复请求
                          this.isLoading=true;       
                          this.currentPage+=1;
                          this.loadStatus = "loading";
                          this.getList();
                     }
                }
            },
            //下拉刷新
            refreshData:function(){
                if (this.isLoading == false) {
                    this.isLoading = true;
                    this.itemList = [];
                    this.currentPage = 1;
                    this.totalPage = 1;
                    this.loadStatus = "loading";
                    this.getList();
                }
            },
            //跳转到详情页
            goItem:function(id) {
                alert(id);
            },
            
            //访问接口
            getList:function() {
            uni.request({
                url:'/api/item/list?page='+this.currentPage,
                method:'get',
            }).then((result)=>{
                let [error,res] = result;
                //result将返回一个数组[error,{NativeData}]
                if(res.statusCode === 200){
                    console.log(res.data);
                    //总页数
                    this.totalPage = res.data.data.total;
                    //把接口返回的数组合并到本地
                    this.itemList=this.itemList.concat(res.data.data.list);
                    console.log(this.itemList);
                }
                if(res.statusCode === 404){
                    console.log('请求的接口没有找到');
                }
                
                this.isLoading=false;
                if (this.currentPage >= this.totalPage){
                    this.loadStatus = "noMore";
                }

               //访问接口返回结果后，停止下拉刷新的动画
                setTimeout(() => {
                    console.log('定时结束');
                    uni.stopPullDownRefresh();
                }, 500);
            })
            },
            
            //设置返回顶部的显示与隐藏
            toTop:function() {
                console.log("begin to top:");
                // #ifdef APP-PLUS-NVUE
                console.log("ifdef APP-PLUS-NVUE");
                const dom = weex.requireModule('dom')
                const el = this.$refs.top
                dom.scrollToElement(el, {});
                // #endif
                // #ifndef APP-PLUS-NVUE
                console.log("ifndef APP-PLUS-NVUE");
                
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
                uni.showToast({
                    icon:"none",
                    title:"纵向滚动 scrollTop 值已被修改为 0"
                })           
                // #endif
              },
            
              //显示返回顶部按钮
              showTopBtn:function() {
                if (this.goTopDisp == false){
                   // #ifdef APP-PLUS-NVUE 
                       const animation = weex.requireModule('animation');
                       animation.transition(this.$refs.goTopButton, {  
                           styles: {
                               transform: `translateX(-80)`  
                           },  
                           duration: 300,  
                           timingFunction: 'linear',  
                           delay: 0  
                       })
                   // #endif
                   // #ifndef APP-PLUS-NVUE
                      this.animation.translateX(-100).step({duration:1000})
                      this.animationData = this.animation.export();
                   // #endif
                   this.goTopDisp = true;
                }
              },
              //隐藏返回顶部按钮
              hideTopBtn:function() {
                    if (this.goTopDisp == true){
                         // #ifdef APP-PLUS-NVUE 
                           const animation = weex.requireModule('animation');
                           animation.transition(this.$refs.goTopButton, {  
                               styles: {
                                   transform: `translateX(0)`  
                               },  
                               duration: 300,  
                               timingFunction: 'linear',  
                               delay: 0  
                              }, () => {
                           })
                         // #endif
                         // #ifndef APP-PLUS-NVUE
                           this.animation.translateX(100).step({duration:1000})
                           this.animationData = this.animation.export()
                         // #endif
                           this.goTopDisp = false;
                    }
              },

            //加载时访问接口得到数据
            onLoad: function(options) {
                  // 页面创建时执行
                  console.log("页面加载");
                  this.getList();
                  
                  // 初始化一个动画
                  var animation = uni.createAnimation({
                      duration: 1000,
                      timingFunction: 'ease',
                  })
                  this.animation = animation;
              },
              onShow: function() {
                console.log("页面进入");
              },
              onReady: function() {
                console.log("页面首次渲染完毕时执行");
              },
              onHide: function() {
                console.log("页面离开");
              },
              onPullDownRefresh: function() {
                //在pages.json中设置enablePullDownRefresh为true开启下拉
                console.log("下拉刷新触发");
                this.refreshData();
              },
              onReachBottom: function() {
                // 页面触底时执行
                console.log("下拉到底");
                 this.loadMore();
              },
              onPageScroll: function(e) {
                console.log(e.scrollTop);
                if (e.scrollTop > 10) { //当距离大于10时显示回到顶部按钮
                    this.showTopBtn();
                } else {
                    this.hideTopBtn();
                }
              },
             onResize: function() {
                console.log("屏幕旋转触发");
              }
        }
    }
</script>

<style lang="scss">
    /* 取消各item的padding */
    /deep/ .uni-list-item__container {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 0px 0px;
        padding-left: 0px;
        flex: 1;
        overflow: hidden;
    }
    /* 回到顶部  */
    .btn {
        position: fixed;
        z-index: 9999;
        right: -136rpx;
        bottom: 180rpx;
        background-color: #007AFF;
        padding: 5rpx;
        border-radius: 4rpx;
    }
    .btn .cuIcon-top {
        font-size: 30rpx;
        color: #FFFFFF;
    }
</style>