vue 的 scroller 使用

不打扰是莪最后的温柔 提交于 2021-02-11 20:41:42

一 安装

使用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);
    };

    //});
  }

 

 

 



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!