vue 的 scroller 使用

一 安裝

使用npm 安裝
npm install vue-scroller -d

二 引入

import VueScroller from "vue-scroller" Vue.use(VueScroller);

三 使用

   <tab> <tab-item @on-item-click="e=>tabChange(0)" v-bind:selected="selectTabIndex=='0'?true:false">未驗收</tab-item> <tab-item @on-item-click="e=>tabChange(1)" v-bind:selected="selectTabIndex=='1'?true:false">已驗收</tab-item> </tab> <scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller" > <scroller>
或者下圖(中間的是模板)

 

在methods方法中增加refresh和infinite2個方法。

 

  methods: {
    /**
     * 下拉刷新
     */
    refresh() {
      console.log("refresh");
      this.pageNumber = 1;
      this.getOrderList(this.selectTabIndex);
    },

    /**
     * 上拉獲取
     */
    infinite(done) {
      this.pageNumber++;
      console.log("infinite");
      this.getOrderList(this.selectTabIndex, done);
    },
    /**
     * 左右滑動設置初始值
     */
    setInitParas(){
      this.pageNumber = 1;
      this.setloadingshow();
      this.items=[]
      this.$refs.my_scroller.finishInfinite(false);
    },
 /**
     * 獲取台賬列表參數信息
     */
    getOrderParams(index) {
      //index為1表示已驗貨,0表示未驗貨 2
      let dbconsignee_phone = localStorage.getItem("dbconsignee_phone");
      var searchData = {
        dbordernumber: "", //提貨單號
        dbconsignee_phone: dbconsignee_phone, //手機號碼
        acceptance_status: index,
        pageSize:5, //一頁多少數
        pageNumber: this.pageNumber, //頁碼
        order: "",
        sort: ""
      };
      return searchData;
    },

    setloadingshow() {
      this.$vux.loading.show({
        text: "加載中"
      });
    },

    /**
     * 獲取台賬列表信息
     */
    getOrderList(index, done) {
      const that = this;
      this.selectTabIndex = index;
      const searchData = this.getOrderParams(this.selectTabIndex);
      const params = {
        url: "/receiver/bill/order/datalist",
        reqparams: {
          cmdData: JSON.stringify(searchData)
        },
        onSuccess(data) {
          that.$vux.loading.hide();
          const billJson = JSON.parse(data);
          const newOrderItem = that.formatterOrderData(billJson.rows);
          if (newOrderItem.length > 0) {
            that.items = that.items.concat(newOrderItem);
          }
          if(typeof(done)=="function"){
            done();
          }
          that.$refs.my_scroller.finishPullToRefresh();
          if ( that.pageNumber >= billJson.pageCount ||billJson.pageCount == 0 ) {
            that.$refs.my_scroller.finishInfinite(true);
          }
        }
      };
      http.getData(params);
    },
 }

四 使用的坑

• 1 做的功能中左右切換使用的是同一個scroller，當一個數據加載完畢，切換到另外一個，不可以上拉獲取數據。
  在切換tab頁的時候調用this.$refs.my_scroller.finishInfinite(false)
finishInfinite函數為scroller實例的方法，當參數為false時，上拉獲取數據可以重新調用。當參數為true，上拉獲取數據回調函數停止使用,下拉下部不再顯示loading，會顯示‘’暫無更多數據

• 下拉刷新，刷新完畢，loading動畫一直存在不消失。
  需要手動調用finishPullToRefresh。停止下拉刷新。
  調用方式：this.$refs.my_scroller.finishPullToRefresh();

• infinite的回調函數done調用時間
  將后台獲取的數據，復制到vue組件的數據源后，再進行調用done函數。如果在之前調用,會循環調用。如果不調用這個函數，上拉獲取數據函數調用不成功。

並附官網API

API

翻譯了一部分經常使用的

Attr. Name	Description	Required	Default Value
onRefresh	下拉刷新	N	-
onInfinite	上拉獲取數據	N	-
refreshText	pull-to-refresh的提示信息	N	下拉刷新
noDataText	當全部數據加載完畢提示信息	N	沒有更多數據
width	scroller container width	N	100%
height	scroller container height	N	100%
snapping	enable snapping mode	N	false
snappingWidth	snapping width	N	100 (stand for 100px)
snappingHeight	snapping height	N	100
refreshLayerColor	text color of pull-to-refresh layer	N	#AAA
loadingLayerColor	text color of infinite-loading layer	N	#AAA
minContentHeight	min content height (px) of scroll-content	N	0

Scroller vm instance methods:

• resize() resize scroller content (已經廢棄)
• triggerPullToRefresh() 觸發下拉刷新
• finishPullToRefresh() 完成下拉刷新.可以手動調用
• finishInfinite(isNoMoreData :Boolean) 當參數為false時，上拉獲取數據可以重新調用。當參數為true，上拉獲取數據回調函數停止使用,下拉下部不再顯示loading，會顯示‘’暫無更多數據
• scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
• scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
• getPosition :Object get current position of scroller content

另:

vue-scroller 是沒有滾動監聽事件的，我是這樣解決的

 document.getElementsByClassName(
            "_v-content"
          )[0].addEventListener("transitionend",function(e){
           self.showToTop = self.$refs.itemDetail_scroller.getPosition().top > 300;
        })

 

 監聽變化

上面的方法 兼容不是很好可以重寫下面的方法

 mounted() {
    let self = this;
    // debugger
    // document
    //   .getElementsByClassName("_v-content")[0]
    //   .addEventListener("transitionend", function(e) {
    self.$refs.category3_scroller.touchMoveold =
      self.$refs.category3_scroller.touchMove;
    self.$refs.category3_scroller.touchMove = function(t) {
      self.showToTop = self.$refs.category3_scroller.getPosition().top > 300;
      self.$refs.category3_scroller.touchMoveold(t);
    };

    //});
  }