使用vue-mint-ui 上拉加载，下拉刷新效果

刚开始进入公司，搞得是vue开发的微信公众号，花了好几天做了一个这个效果，自己都笑哭了。做了这么长时间。

      <!-- <div class="dataSet" v-for="(item,index) in bulletinList" :key="item.index"> -->
      <div class="dataSet">
        <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
<v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
  <ul class="list" >
    <li v-for="(item,index) in pageList" :key="item.index" @click="gotoDetail(index)">
      
      <div class="dataList">
            <div class="dataImg"><img v-if="item.imgurl" :src="item.imgurl"/></div>
            <div class="dataTit">
              <div class="title"><p>{{item.title|filterFun}}</p></div>
              <div class="time">{{item.modifytime|formatDate}}</div>
            </div>
          </div>
    </li>
    <li v-if="allLoaded" class="tobottom">
        到底了( ఠൠఠ )
    </li>
  </ul>
</v-loadmore>
    </div>



      </div>
    </div>
</div>

export default {
name: “announcement”,
components: {
TopHeader,
‘v-loadmore’:Loadmore // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
// 推荐应用组件时用a-b形式起名
},
data() {
return {
tit: “公告通知”,
searchCondition:{ //分页属性
pageNo:1,
pageSize:4
},
pageList:[],
allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
scrollMode:“auto” ,//移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
storageList:[]
};
},
mounted(){
this.loadPageList(); //初次访问查询列表
},
methods: {

//跳转页面
 gotoDetail(index) {
   console.log(index)
  // sessionStorage.setItem("id", res.data.bulletinList);
  sessionStorage.setItem("annList", JSON.stringify(this.pageList[index]));

  this.$router.push({path:'/announcementdetails/announcementdetails'});
},

loadTop:function() { //组件提供的下拉触发方法
    //下拉加载
    this.loadPageList();
    this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位
  },
  loadBottom:function() {
    // 上拉加载
    this.more();// 上拉触发的分页查询
    this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
  },
  loadPageList:function (){
    let userInfo = localStorage.getItem('userInfo');
    userInfo = JSON.parse(userInfo);


      // 查询数据
    
    let data = {
        ck: userInfo.connkey,
        platform:this.$pub.platform,
        pageSize:this.searchCondition.pageSize,
        pageIndex:1
        // pageSize:4,
        // pageIndex:1
    };
    this.$server.BulletinList(data).then(res => {
        if (res.Code == 1 && res.WsCode == 1) {
            //this.HospitalData = this.HospitalData.concat(res.content.data);
            //this.pageList = this.pageList.concat(res.Data.bulletinList);

            this.isHaveMore(res.Data);
            this.pageList=res.Data.bulletinList;
            this.$nextTick(function()
            {
                this.scrollMode="touch";
            });


            this.allNum= this.pageList.length;
            if(this.allNum <  4 ){
                this.allLoaded = true
            }
            this.searchCondition.pageNo=1;
        }
    }).catch(
        err => {
            // console.log(err);
            this.$message.warning('查无数据!')
         }
    )
  },
  more:function (){

    let userInfo = localStorage.getItem('userInfo');
    userInfo = JSON.parse(userInfo);
      // 分页查询
    this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;

    let data = {
        ck: userInfo.connkey,
        platform:this.$pub.platform,
        pageSize:this.searchCondition.pageSize,
        pageIndex:this.searchCondition.pageNo
    };
    this.$server.BulletinList(data).then(res => {
        this.pageList=this.pageList.concat(res.Data.bulletinList);
        this.allNum= this.pageList.length;
        if(this.allNum <= this.searchCondition.pageNo * 4 ){
            this.allLoaded = true
        }

    }).catch(
        err => {
            
         }
    )
  },
  isHaveMore:function(isHaveMore){
    // 是否还有下一页，如果没有就禁止上拉刷新
    this.allLoaded = true; //true是禁止上拉加载
    if(isHaveMore){
      this.allLoaded = false;
    }
  }

},
filters: {
formatDate(time) {
var date = new Date(time);
return formatDate(date, ‘yyyy-MM-dd’);
},
filterFun: function (value) {

        if(value&& value.length > 20) {

            value= value.substring(0,20)+ '...';
          }
         return value;

      }
}

};