zoukankan      html  css  js  c++  java
  • vue下拉加载交互

    首先安装依赖插件

    npm i -s vuescroll

    然后引用

    import vuescroll from 'vuescroll'
    Vue.use(vuescroll)

    date里边添加配置


    const ops = {
    vuescroll: {
    mode: 'slide',
    pullRefresh: {
    enable: false
    },
    pushLoad: {
    enable: true,
    auto: false, //是否自动触发加载
    autoLoadDistance: 10,
    tips :{
    deactive:'Pull_load',
    active:'Release_load',
    start:'loading',
    beforeDeactive:'Load_success'
    }
    }
    },
    scrollPanel: {
    scrollingX: false,
    }
    }

    然后data return下ops 

    return {
    ops,
    }

    页面开始渲染啦

    <vue-scroll
    :ops="ops"
    @load-start="handleLoadStart"
    @load-before-deactivate="handleLBD">
    <div v-if="count.length < 1">{{itext}}</div>
    <div v-for="i in count">
    <span class="tx-1">{{ i.cash_time }}</span>
    <span class="tx-2">{{ i.cash }}</span>
    <span class="tx-3">{{ i.account_id }}</span>
    </div>
    </vue-scroll>

    然后配置下拉


    //记录上拉加载
    handleLoadStart(vm, dom, done) {

    //这里写接口以及铺数据
    done()
    })
    },
    handleLBD(vm, loadDom, done) {
    //console.log('上啦结束了')
    done()
    },

    好啦  完成啦~

  • 相关阅读:
    Linux正则和grep命令
    Linux用户和权限
    XP下安装ubuntu
    Linux命令行和shell编程
    Linux软件安装及基本概念
    Linux历史,安装,分区,版本
    Eric Linux
    批量插入数据
    Django 相关
    标签,
  • 原文地址:https://www.cnblogs.com/PoisonousMushrooms/p/12030795.html
Copyright © 2011-2022 走看看