Pull-up load pull-down refresh and return to top

Based on uniApp a set of my own development experience, greatly improved efficiency, pull-up load, pull-down refresh and return to the top of the process you spend a few minutes to digest the following content can quickly improve your development efficiency

Forgive me for writing this article for the first time but I have more to share take my time

First, configure pages. Json {"path" : "pages/shop/search/search"."style" : {
            // Configure this
            "enablePullDownRefresh": true}} Then perform the HTML section on the page you want to pull up to load and pull down to refresh and return to the top// the HTML background returns an empty array if there is no data or an error if you do not write your own logic
<view class="noData" v-if = "data.length == 0"> ~ No data available ~ </view><view v-for = "(item,index) in data">// Write your own page layout</view>
/ / at the bottom
<view style="text-align: center; color: #666; font-size: 24rpx;" v-if="bottomflag">~ No more data is available</view>
// Return to the top
<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: ["Data to loop"].page:1./ / page
      bottomflag:false.// Determine the bottom data
      goTopflag:false.// Return to top display judgment
   },
  // Drop load
onReachBottom(){
    // console.log(1)
    if(!this.bottomflag){// If there is no data, the request will not be refreshed
    this.getlist(this.page++)
      }
},
  // Pull up refresh
onPullDownRefresh() {
    this.getlist(this.page= 1)
    this.bottomflag = false
},
   // Listen for scrolling
  onPageScroll(e){
      if(e.scrollTop>=350) {this.goTopflag = true
      }else{
          this.goTopflag = false}},onLoad(){
  	this.getlist()
  },
  methods: {// Return to the top
    goTop(){
        uni.pageScrollTo({
            scrollTop:0.duration:200})},getlist(){/ request interface XXXXXXX ({page:this.page,
            }).then(res= > {
                if(res.code == 10000) {// If the page is 1 then the requested data is rendered directly
                    if(this.page==1) {this.data = [returned data]// Test to see if there is any useless logic
                        // var data = res.data.data
                        // for(var i = 0; i<=10; i++){
                        // this.dataArr = this.dataArr.concat(data)
                        // }
                    }else{
                     // The page is not the one requested by 1
                        if([returned data].length! =0) {this.data =	this.data.concat([returned data])}else{
                            // If there is no data, there is no data at the bottom

                            this.bottomflag = true
                        }
                    }
                    uni.showToast({
                        title: 'Load successful'.duration: 1000.complete:() = >{ uni.stopPullDownRefresh(); }}); } }) } } } } style// Return to the top 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;
}

Copy the code