uni-app 使用 mescroll-nui 做加載刷新功能

//首先  在官網 https://ext.dcloud.net.cn/plugin?id=343  下載 mescroll-nui 這個組件。

//然后解壓，有個目錄為 mescroll-nui 的文件夾

//在項目中新建一個文件夾名為：components ，這個文件夾專門用來放下載后的組件文件的，把mescroll-nui文件放到這里面即可

<template>
  <view class="container">
    <!--這里是tab部分 -->
    <view class="header_tab">
       <view class="tab_detail" @tap="changeCurrentIndex(0)">
          <text :class="defaultIndex == 0 ? 'current':''">目錄一</text>
      </view>
      <view class="tab_detail" @tap="changeCurrentIndex(1)">
         <text :class="defaultIndex == 1 ? 'current':''">目錄二</text>
      </view>
      <view class="tab_detail" @tap="changeCurrentIndex(2)">
        <text :class="defaultIndex == 2 ? 'current':''">目錄三</text>
      </view>
   </view>
   <!-- 這里是滾動部分 -->
   <mescroll-uni top="100" @down="downFun" @up="upFun" :up="upTips" class="message" >
      <view class="message_content" v-for="(item,index) in dataList" :key="index">
          <view class="message_content_left">
             <image class="img" src="" alt=""></image>
          </view>
          <view class="message_content_rght">
             <view class="username">username</view>
          </view>
      </view>
   </mescroll-uni>
  </view>
</template>
//css樣式 是用的scss語法
<style lang="scss">
   page{
     background-color:#f8f8f8;
     height:100%；
   }
   .container{
       height:100%;

       .header_tab{
          display:flex;
          background-color:#fff;
          padding-right:20rpx;
          margin-bottom:10rpx;
          z-index:999;
          justify-content:space-around;

          .tab_detail{
              font-size:28rpx;
              margin:20rpx 0;

              .current{
                 padding:28rpx 12rpx;
                 border-bottom:2px solid #00cf89;
                 color:#00cf89;
              }
          }
       }
       .message{
          height:92%;

          .message_content{
             display:flex;
             flex-direction:row;
             margin:20rpx 20rpx 0;
             padding:24rpx 20rpx 24rpx 0;
             background-color:#fff;
             width:100%;
             
             .message_content_left{
                 width:120rpx;
                 .img{
                    width:100%;
                    height:120rpx;
                 }
             }
             .message_content_rght{
                 width:calc(100% - 120rpx);
                 .username{
                    font-size:26rpx;
                 }
             }
          }
       }
   }
</style>
<script>
//js 部分
//先把 mescrolluni 文件引入到當前頁面
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
export default{
    components:{
       MescrollUni
    },
    data(){
      return{
       defaultIndex:0,
       isShowNoMore:false,
       upTips:{
         textNoMore:'我是有底線的',
       },
       dataList:[{
         nickname:'xxxx',
         gender:'1',
         age:'18',
         hobby:'reading',
         city:'chengdu'
      }]
     }
    },

    methods:{
       mescrollInit(mescroll){
          console.log(mescroll)
       },
       downFun(mescroll){
          setTimeout(()=>{
             mescroll.endErr()
          },1000)
       },
       upFun(mescroll){
          setTimeout(()=>{
             if(this.dataList.length<10){
                 for(var i=0;i<5;i++){
                    var obj = {
                       nickname:'',
                       gender:'',
                       age:'',
                       city:'chengdu',
                       hobby:'listening'
                    };
                    this.dataList.push(obj);
                 }
                 this.isShowNoMore = false;
                 mescroll.endUpScroll(this.isShowNoMore);
             }else{
                 this.isShowNoMore = true;
                 mescroll.endUpScroll(this.isShowNoMore);
             }
          },1000)
       },
       //點擊切換tab
       changeCurrentIndex(index){
          this.defaultIndex = index;
       }
    }
}
</script>

 效果圖如下：

 

參考鏈接:https://blog.csdn.net/Xl4277/article/details/99833067

關於mescroll參數詳解見官網: http://www.mescroll.com/uni.html#options