上拉加载下拉刷新和返回顶部

基于uniapp一套自己的开发心得，大大提高效率，上拉加载下拉刷新和返回顶部流程 以下内容你花个几分钟去消化一下 能很快很大的提高开发效率

第一次写文章 多多见谅 我还有很多可以分享 慢慢来

首先
pages.json进行配置
{
    "path" : "pages/shop/search/search",
        "style" : {
            //配置这个
            "enablePullDownRefresh": true
        }
}
然后在想要实现上拉加载下拉刷新和返回顶部的页面进行
HTML部分
//HTML 后台如果无数据 返回的是空数组否则报错 如果不是 自己写逻辑
<view class="noData" v-if = "data.length == 0">
		~暂无数据~
</view>
<view v-for = "(item,index) in data">
		//页面布局 自己写
</view>
//底部的
<view style="text-align: center;color: #666; font-size: 24rpx;" v-if="bottomflag">
        ~暂无更多数据~
</view>
//返回顶部 
<view class="goTop" @click="goTop" :class="['goTop',{'fadeIn':goTopflag}]">
    <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ec93378077b411bb7e5da089f41b283~tplv-k3u1fbpfcp-zoom-1.image" mode=""></image>
</view>

js
export default{
  data(){
     return{
      dataArr:["要循环的数据"],
      page:1,//页码
      bottomflag:false,//底部数据判断
      goTopflag:false,//返回顶部显示判断
   },
  //下拉加载
onReachBottom(){
    // console.log(1)
    if(!this.bottomflag){//这个判断是判断无数据时就不请求刷新了 减少http请求
    this.getlist(this.page++)
      }
},
  //上拉刷新  
onPullDownRefresh() {
    this.getlist(this.page= 1)
    this.bottomflag = false
},
   //监听滚动
  onPageScroll(e){
      if(e.scrollTop>=350){
          this.goTopflag = true
      }else{
          this.goTopflag = false
      }
  },
  onLoad(){
  	this.getlist()
  },
  methods:{
     //返回顶部
    goTop(){
        uni.pageScrollTo({
            scrollTop:0,
            duration:200
        })
    },
    getlist(){
           /请求接口
          xxxxxxx({
                page:this.page,
            }).then(res => {
                if(res.code == 10000){
                    //如果page是1 那么请求回来的数据直接渲染 
                    if(this.page==1){
                        this.data = [返回的数据]
                        //测试看看有没有用的逻辑
                        // var data = res.data.data
                        // for(var i = 0;i<=10;i++){
                        // 	this.dataArr = this.dataArr.concat(data)
                        // }
                    }else{
                     //这里的page肯定不是1 请求回来的数据进行合并 
                        if([返回的数据].length != 0){
                            this.data =	this.data.concat([返回的数据])
                        }else{
                            //如果无数据 就显示底部无数

                            this.bottomflag = true
                        }
                    }
                    uni.showToast({
                        title: `加载成功`,
                        duration: 1000,
                        complete:() => {
                            uni.stopPullDownRefresh();
                        }
                    });
                }
    	})
    }
  }
}
}

style

//返回顶部css
.goTop{
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    position: fixed;
    right: 24rpx;
    bottom: 200rpx;
    overflow: hidden;
    transition: all .5s;
    opacity: 0;
    image{
        width: 100%;
        height: 100%;
    }
}
.fadeIn{
    opacity: 1;
}