美文网首页
vux-ui scroller

vux-ui scroller

作者: 放任自由f0 | 来源:发表于2019-07-10 15:44 被阅读0次
<scroller :lockX="true"
              :use-pulldown="true"
              :use-pullup="true"
              :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
              :pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
              @on-pullup-loading="loadMoreData"
              @on-pulldown-loading="refreshData"
              ref="MyMessageScroller">



<div class="list-wrap">
          <scroller v-model="scrollerStatus" lock-x height="100%" :bounce="false" :use-pullup="true" :pullup-config="upobj" @on-pullup-loading="onScrollDishPage" :scroll-bottom-offset="100" ref="scrollerDish">
            <div>
              <div class="list-item" v-for="item in dishList" :key="item">
                <div class="img">
                  <img :src="item.dishImgUrl" alt="">
                </div>
                <div class="cai-info">
                  <p class="cai-name">{{item.dishName}}</p>
                  <p class="sell">月售{{item.dishNum}}</p>
                  <p class="price">¥<span class="num">{{item.dishPrice}}</span></p>
                </div>
                <div class="add" @click="addDishToOrder(item)"></div>
              </div>
              <load-more :show-loading="dishLoading" :tip="dishLoadingTxt"></load-more>
            </div>
          </scroller>
        </div>


getDishList(isRestPage){
      let _this = this;
      let params={
        // dishTypeId:_this.currentDishTypeId,
        dishTimeId:_this.currentDishTypeId,
        pageSize:10,
        pageIndex:_this.dishPageIndex
      }
      _this.dishLoading = true;
      _this.dishLoadingTxt = "正在加载";
      getPageDish(params).then(res => {
        if(res.status == 200){
          _this.dishLoading = false
          if(isRestPage){
            _this.dishList = res.data.records;
            _this.dishPages = res.data.pages;
            _this.$nextTick(() => {
              _this.$refs.scrollerDish.reset();
            }) 
          }else{
            _this.dishList.push(...res.data.records);
             _this.$nextTick(() => {
              _this.$refs.scrollerDish.donePullup();
            })
          }
          if(_this.dishPageIndex >= _this.dishPages ){
            _this.dishLoadingTxt = "没有更多了"
          }

          _this.$nextTick(() => {
            _this.$refs.scrollerDish.donePullup();
            
          })
        }
      })
    },
onScrollDishPage() {
      let _this = this;
      if (this.dishLoading) {
        return;
      } else {
        if (this.dishPageIndex >= this.dishPages) {
          //this.dishLoadingTxt = "没有更多了"
          return;
        }
        this.dishPageIndex++;
        this.getDishList()
      }
    },


upobj: {
        content: '',
        pullUpHeight: 60,
        height: 0,
        autoRefresh: false,
        downContent: '',
        upContent: '',
        loadingContent: ''
      },
content: '请上拉刷新数据',
 pullUpHeight: 60,
 height: 40,   // 显示文字的所占的高度
 autoRefresh: false,
 downContent: '请上拉刷新数据',
 upContent: '请上拉刷新数据',
 loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
scrollerStatus: {
      pullupStatus: 'default'
 }

this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
注意:scroller子元素必须是一个div

相关文章

网友评论

      本文标题:vux-ui scroller

      本文链接:https://www.haomeiwen.com/subject/ezehkctx.html