vux scroller 向上刷新加載數據

研究了一下如何使用vux 的向上刷新

本身熟悉js滾動到底加載的同學應該沒什么問題

主要是對思路的理解

當頁面第一次加載的時候isEmpty為true，觸發getNewsList（true）

當滾動到底部的時候會觸發selPullUp方法這個時候isEmpty為false

<template>
  <div>
    <scroller v-show="isShow" v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="isbounce"
              :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp">
      <div class="box2">
        <div class="weui-panel weui-panel_access">
          <div class="weui-panel__hd">圖文組合列表</div>
          <div v-for="list, index in lists" class="weui-panel__bd">
            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
              <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" :src="list.pic" alt="">
              </div>
              <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">{{list.title}}</h4>
                <p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運行軌道。</p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </scroller>
    <loading v-model="showloading" :text="textloading"></loading>

  </div>
</template>
<script>
  import {Scroller, Loading,Panel} from 'vux'
  export default {
    components: {Scroller, Loading,Panel},
    data () {
      return {
        type: '1',
        PageIndex: 1,//頁碼從第一頁開始
        PageSize: 5,//煤業顯示的條數
        isShow: false,//是否顯示scroller,第一次請求數據過程中隱藏插件，不隱藏的時候會顯示“請上拉刷新數據”的字樣，不好看
        showloading: false,
        textloading: '加載中',
        showUp: true,
        isbounce: false,
        lists: [],
        upobj: {
          content: '請上拉刷新數據',
          pullUpHeight: 60,
          height: 40,
          autoRefresh: false,
          downContent: '請上拉刷新數據',
          upContent: '請上拉刷新數據',
          loadingContent: '加載中...',
          clsPrefix: 'xs-plugin-pullup-'
        },
        isShowLoading: false,
        textLoading: '加載中',
        scrollerStatus: {
          pullupStatus: 'default'
        }
      }
    },
    mounted () {
      //第一次加載
      this.getNewsList(true)
      this.$nextTick(() => {
        this.$refs.scroller.reset()
      })
    },
    methods: {
      //第一次加載的時候容易為空true
      getNewsList (isEmpty) {
        this.showloading = true
　　　　 this.$http.get('http://ons.me/tools/dropload/json.php?page=' + this.PageIndex + '&size=' + this.PageSize).then(response => {
          // sucess callback
          var data = response.data;
          if (isEmpty) {
            this.lists = []
            this.show = false
          } else {
            //isEmpty為false時，也就是向上滾動刷新selPullUp ()方法被被調用的時候
            if (data && data.length === 0) {
              this.showToast = true
              this.isShowLoading = false
              this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
              return
            }
          }
          for (var i = 0; i < data.length; i++) {
            this.lists.push(data[i]);
          }
          this.isShow = true;
          this.showloading = false
          if (!isEmpty) {
            this.scrollerStatus.pullupStatus = 'default'
            this.$nextTick(() => {
              this.$refs.scroller.reset()
            })
          }
        }, response => {
          // error callback
          this.isShow = false
        })
      },
      selPullUp () {

this.PageIndex++      
        this.getNewsList(false) } }, activated () { this.$refs.scroller.reset() } } </script>
<style lang="less"> @import '../../styles/weui/widget/weui_cell/weui_cell_global.less'; @import '../../styles/weui/widget/weui_cell/weui_access.less'; @import '../../styles/weui/widget/weui_panel/weui_panel.less'; </style>

 

 

 

根據博主：http://blog.csdn.net/a1871837908/article/details/55001386

代碼修改

感謝！！