vue下拉刷新

<!--
 * @Description: 
 * @Author: 熊成强
 * @Date: 2019-07-20 08:48:53
 * @LastEditTime: 2019-07-27 16:11:38
 * @LastEditors: 熊成强
 -->
<template>
  <div class="myOrder">
    <van-tabs
      title-active-color="#007AFF"
      title-inactive-color="#333333"
      color="#007AFF"
      v-model="active"
      animated
      swipeable
      sticky
      :offset-top="46"
    >
      <van-tab v-for="i in styleList" :name="i.value" :title="i.label" :key="i.value">
        <div class="bscroll" ref="bscroll">
          <div>
            <div class="pulldown-wrapper">
              <div v-show="beforePullDown">
                <div class="jiazhai">
                  <img
                    style="width:30px;height:30px;"
                    :class="{isshuaxin:isShuaxin}"
                    src="/static/icon/to.png"
                    alt
                  />
                  <span>{{reshua}}</span>
                </div>
              </div>
              <div v-show="!beforePullDown">
                <div v-show="isPullingDown">
                  <vue-loading
                    type="bars"
                    color="#d9544e"
                    :size="{ width: '30px', height: '24px' }"
                  ></vue-loading>
                </div>
                <div v-show="!isPullingDown">
                  <span>刷新成功</span>
                </div>
              </div>
            </div>
            <orderitems :list="list" class="order-item" @click="toDeatil(list)"></orderitems>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import orderitems from '@/components/OrderItems'

import BScroll from 'better-scroll'
import apis from '@/api/order'
export default {
  components: {
    orderitems,
  },
  mounted () {
    let that = this
    this.getOrderList()
    //每次进来会自动进行一次数据请求
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  data () {
    return {
      isShuaxin: false,
      reshua: '下拉刷新',
      beforePullDown: true,
      isPullingDown: false,
      //88
      options: {
        bounce: true,
        pullDownRefresh: {
          threshold: 55, // 当下拉到超过顶部 50px 时，触发 pullingDown 事件
          stop: 46 // 刷新数据的过程中，回弹停留在距离顶部还有 20px 的位置
        },
        pullUpLoad: {
          threshold: -20 // 在上拉到超过底部 20px 时，触发 pullingUp 事件
        },
        //          pullDownRefresh: false, //关闭下拉
        //          pullUpLoad: false, // 关闭上拉
        click: true,
        probeType: 3,
        startY: 0,
        scrollbar: false
      },
      dropDown: false,
      styleList: [
        {
          value: '1024',
          label: '全部'
        },
        {
          value: '1001',
          label: '已付款'
        },
        {
          value: '301',
          label: '待收货'
        },
        {
          value: '1002',
          label: '已完成'
        }
      ],
      active: this.$route.query.style || '1024',
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      count: 0,
      error: false,
      param: {
        pageSize: 5,
        pageNum: 1
      }
    }
  },
  watch: {
    active: {
      handler (n, o) {
        this.param = {
          pageSize: 5,
          pageNum: 1
        }
      },
      deep: true
    },
    param: {
      handler (n, o) {
        this.getOrderList()
      },
      deep: true
    }
  },
  methods: {
    _initScroll () {
      this.foodsScroll = new BScroll('.bscroll', this.options)
      // 下拉
      this.foodsScroll.on('pullingDown', () => {
        this.beforePullDown = false
        this.isPullingDown = true
        // 刷新数据的过程中，回弹停留在距离顶部还有20px的位置
        this.param = {
          pageSize: 5,
          pageNum: 1,
          isLoading: true
        }
      })
      // 上拉
      this.foodsScroll.on('pullingUp', () => {
        this.param.pageNum += 1
      })
      this.foodsScroll.on('scroll', this.scrollHandler)
    },
    scrollHandler (e) {
      this.reshua = e.y > 55 ? '松下刷新' : "下拉刷新"
      this.isShuaxin = e.y > 55
    },
    pullingDownUp () {
      this.foodsScroll.finishPullDown()
      this.foodsScroll.finishPullUp()
      this.foodsScroll.refresh() //重新计算元素高度
    },
    //获取订单列表
    async getOrderList (param = this.param) {
      param.s_EQ_orderServiceStatus = this.active
      let result = await apis.orderList(param)
      this.isPullingDown = false
      let timer = setInterval(() => {
        this.beforePullDown = true
        clearInterval(timer)
      }, 1000)
      console.log(result.data)
      if (param.pageNum < 2) {
        this.list = result.data.list
      } else if (param.pageNum > 1) {
        this.list = this.list.concat(result.data.list)
        console.log('xcq', this.list)
      }
      this.$nextTick(() => {
        let timer1 = setInterval(() => {
          this.pullingDownUp()
          clearInterval(timer1)
        }, 500)
      })
    },
    //加载更多
    async onLoad () {
      // let a = await this.getOrderList()
      return
      // 异步更新数据
      // return
      setTimeout(() => {
        this.loading = false
        this.param.pageNum = this.param.pageNum + 1
        // this.finished = true
        console.log(this.param.pageNum)
        console.log('xcw')
        // for (let i = 1; i < this.list.lenght; i++) {
        //   this.list.push(this.list.length + i);
        // }
        // if (this.param.pageNum >= 1) {
        //   this.getOrderList()
        //   // 加载状态结束
        //   this.loading = false
        // }

        // 数据全部加载完成
        // if (this.list.length >= this.list.length + 1) {
        //   this.finished = true
        // }
      }, 500)
      console.log('上拉刷新')
    },
    //上拉刷新
    // onRefresh() {
    //   // setTimeout(() => {
    //     this.$toast('刷新成功')
    //     this.isLoading = false
    //     this.getOrderList()
    //     // this.list=[]
    //     //  for (let i = 0; i < 3; i++) {
    //     // this.list.unhsift();
    //     //   }
    //     // this.count++
    //   // }, 500)
    // }
    onRefresh () {
      // 下拉刷新
      let timer = setTimeout(() => {
        this.param.pageNum = 1
        this.isLoading = false
        this.getOrderList()
        this.$toast('刷新成功')
        clearInterval(timer)
      }, 1000)
    }
  }
}
</script>
<style>
.pulldown-wrapper {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%) translateZ(0);
  text-align: center;
  color: #999;
}
.van-tabs {
  height: 100%;
}
.van-tabs__content--animated {
  overflow: hidden;
  height: 100%;
}
.van-tab__pane {
  height: 100%;
}
.order-item {
  /* height: 100%; */
}
</style>

<style lang="scss" scoped>
.bscroll {
  display: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bscroll-container {
  background: #ff0000;
}
.drop-down {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 0.8rem;
  color: #ccc;
}
.myOrder {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: #f8f8f8;
  overflow: hidden;
}
.jiazhai {
  @extend .flex;
  justify-content: center;
  img {
    transform: rotate(180deg);
    transition: all 0.3s;
  }
  .isshuaxin {
    transform: rotate(0deg);
  }
}
</style>