使用vue的pull-to插件进行分页操作

最新推荐文章于 2024-08-09 07:53:28 发布
最新推荐文章于 2024-08-09 07:53:28 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 错误整理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rendeyishi/article/details/85249631
版权

1.官网地址：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md

2.安装：

npm install vue-pull-to --save

3.使用

<template scope>
    <div class="user-page">
        <div class="top">
            <van-row align="center" type="flex" justify="center">
                <van-col span="24">
                    <van-row class="user-msg">
                        <van-col span="7">
                            <img alt="头像" class="user-img" :src="headimgurl" />
                        </van-col>
                        <van-col span="9"><p class="user-name">{{userName}}</p></van-col>
                        <van-col span="8"><img class="user-set" src="../../assets/img/pageImg/setting.png" alt="设置"
                                               @click="setting"></van-col>
                    </van-row>
                    <van-row type="flex" justify="center">
                        <van-col span="22" class="message">
                            <van-swipe :autoplay="3000">
                                <van-swipe-item>
                                    <img src="../../assets/img/pageImg/1.jpg" @click="carouseGoUrl(0)" style="height:150px;width:100%;"/>
                                </van-swipe-item>
                                <van-swipe-item>
                                    <img src="../../assets/img/pageImg/2.jpg" @click="carouseGoUrl(1)" style="height:150px;width:100%;"/>
                                </van-swipe-item>
                                <van-swipe-item>
                                    <img src="../../assets/img/pageImg/jyAdvertise.png" @click="carouseGoUrl(2)" style="height:150px;width:100%;"/>
                                </van-swipe-item>
                            </van-swipe>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <van-row align="center" type="flex" justify="center">
            <van-col span="10">
                <div class="btn-style" @click="gotoShop"><i class="shoppingMall"></i>积分商城</div>
            </van-col>
            <van-col span="10" offset="2">
                <div class="btn-style" @click="myAccount"><i class="userMoney"></i>我的账户</div>
            </van-col>
        </van-row>

        <div class="task-tab">
            <van-row align="center" type="flex" justify="center">
                <van-col span="6">
                    <div class="myTask">我的任务</div>
                </van-col>
                <van-col span="10" offset="6">
                    <van-tabs v-model="active" color="black" @click="TaskTab">
                        <van-tab>
                            <div slot="title" class="tabTitle">进行中</div>
                        </van-tab>
                        <van-tab>
                            <div slot="title" class="tabTitle">已完成</div>
                        </van-tab>
                    </van-tabs>
                </van-col>
            </van-row>
            <van-row align="center" type="flex" justify="center" v-show="show">
                <van-col span="22">
                    <ul>
                        <li class="TaskLine" v-for="(item,index) of TaskList" :key="item.index">
                            <van-row align="center" type="flex" justify="center">
                                <van-col span="2">
                                    <div :class="item.typeClass">{{item.type}}</div>
                                </van-col>
                                <van-col span="15" offset="1">
                                    <div class="taskShare">
                                        <p>{{item.name}}<span>积分+{{item.point}}{{item.units}}</span></p>
                                        <p>{{item.description}}&nbsp;{{item.info}}</p>
                                    </div>
                                </van-col>
                                <van-col span="5">
                                    <div class="gotoTask" @click="gotoFinish(index,item.url,item.name_en)"
                                         v-if="item.toFinishShow==='true'">去完成
                                    </div>
                                    <div v-else></div>
                                </van-col>
                            </van-row>
                        </li>
                    </ul>
                </van-col>
            </van-row>
            <van-list  style="margin-bottom:20px">
                <van-row align="center" type="flex" justify="center" v-show="!show">
                    <van-col span="22">
                        <ul>
                            <pull-to  @bottom-pull="loadmore" :top-load-method="topChange"  :bottom-config="BOTTOM_DEFAULT_CONFIG" :top-config="TOP_DEFAULT_CONFIG" >
                                <li class="TaskLine" v-for="(item,index) of list" :key="item.index">
                                    <van-row align="center" type="flex" justify="center">
                                        <van-col span="2">
                                            <div :class="item.typeClass">{{item.type}}</div>
                                        </van-col>
                                        <van-col span="15" offset="1">
                                            <div class="taskShare">
                                                <p>{{item.name}}<span>积分+{{item.point}}{{item.units}}</span></p>
                                                <p>{{item.description}}&nbsp;{{item.info}}</p>
                                            </div>
                                        </van-col>
                                        <van-col span="5">
                                            <div>
                                                <p class="gotoTask EndTask">已完成</p>
                                                <p class="EndTask">{{item.finishTime}}</p>
                                            </div>
                                        </van-col>
                                    </van-row>
                                </li>
                            </pull-to>
                            <li class="loadingTextLable" >{{loadingTextLable}}</li>
                        </ul>
                    </van-col>
                </van-row>
            </van-list>
        </div>
    </div>
</template>

<script>
    import  Vue from 'vue'
    import {Tab, Tabs, Row, Col, Swipe, SwipeItem, Lazyload, List,Toast} from 'vant';
    import {apiurl} from '../../utils/public.js';
    import PullTo from 'vue-pull-to';
    Vue.use(Swipe).use(SwipeItem);
    Vue.use(Tab).use(Tabs).use(Row).use(Col);
    const TOP_DEFAULT_CONFIG = {
        pullText: '下拉刷新', // 下拉时显示的文字
        triggerText: '释放更新', // 下拉到触发距离时显示的文字
        loadingText: '', // 加载中的文字
        doneText: '加载完成', // 加载完成的文字
        failText: '加载失败', // 加载失败的文字
        loadedStayTime: 400, // 加载完后停留的时间ms
        stayDistance: 50, // 触发刷新后停留的距离
        triggerDistance: 70,// 下拉刷新触发的距离
    };
    const BOTTOM_DEFAULT_CONFIG = {
        pullText: '上拉加载',
        triggerText: '释放更新',
        loadingText: '加载中...',
        doneText: '加载完成',
        failText: '加载失败',
        loadedStayTime: 400,
        stayDistance: 50,
        triggerDistance: 70
    };
    export default {
        name: "firstPage",
        components: {
            [List.name]: List,
            [Row.name]: Row,
            [Col.name]: Col,
            [Lazyload.name]: Lazyload,
            [Toast.name]: Toast,
            PullTo
        },
        data() {
            return {
                show: true,
                userName: '',
                headimgurl: '',
                active: 2,
                list: [], //已完成任务数据
                TaskList: [],//进行中任务数据
                userID: '',
                pageNum:1,//当前页码
                pageSize:2,//每页展示的数据条数
                resultCount:0,//已完成数据总数
                loadData:0,
                loadingTextLable:'下拉加载数据'
            }
        },
        created: function () {
            this.checkBundled();
        },
        methods: {
            topChange(){
                this.pageNum=1;
                this.loadData=0;
                this.queryDoneTask();
                this.loadingTextLable='下拉加载数据';
            },
            loadmore(loaded) {
                if(this.loadingTextLable==="数据加载完成"){
                    return;
                }
                if(this.pageNum===1){
                    this.pageNum++;
                }
                var url = apiurl.dataapiurl + "?msgtype=task_view_done_get&msg={'openid':'" + sessionStorage.openid +
                    "','page':'" + this.pageNum + "','pageSize':'"+this.pageSize+"'}";
                var successCallback = (response) => {
                    if (response.status == 200) {
                        if (response.data.result === "success") {
                            this.resultCount=response.data.resultCount;
                            var ccount=Math.ceil(this.resultCount/this.pageSize);
                            if (this.pageNum ===ccount) {
                                this.loadData++;
                                this.loadingTextLable="数据加载完成";
                            }else if(this.pageNum<ccount){
                                this.loadingTextLable="下拉加载数据";
                            }
                            if (response.data.resultData.length === 0) {
                                this.pageNum--;
                            } else {
                                this.pageNum++;
                                if(this.loadData<=1){
                                    this.list = this.list.concat(response.data.resultData);
                                }
                            }
                        } else {
                            console.log("getCardList failure:" + response.data.resultMsg);
                        }
                    }
                };
                var errorCallback = (err) => {
                    console.log('getCardList error:' + JSON.stringify(err));
                    this.pageNum--;
                };
                this.axios.post(url).then(successCallback).catch(errorCallback);
            }
            , carouseGoUrl: function (index) {
                //裂变
                if (index === 0) {
                    this.$router.push({name: "ShareP1"});
                }
                //商城首页
                else if (index === 1) {
                    window.location.href = apiurl.mallurl + "/mall?uuid=" + this.userID;
                }
                //我的账户
                else if (index === 2) {
                    window.location.href = apiurl.mallurl + "/uc?uuid=" + this.userID;
                }

            }
            , checkBundled: function () {
                var url = apiurl.loginurl + "?msgtype=check_bundle&msg={'openid':'" + sessionStorage.openid + "'}";
                var successCallback = (response) => {
                    var datas = response.data;
                    if (datas.result == "success") {
                        var bundled = datas.resultData.bundled;
                        if (bundled != null && bundled == true) {
                            this.getCustomerInfoByOpenId();
                            this.queryUnderWayTask();
                        } else {
                            this.$router.push({name: "Login"});
                        }
                    }
                };
                var errorCallback = (err) => {
                    console.log('checkBunded error 2:' + JSON.stringify(err));
                };
                this.axios.post(url).then(successCallback).catch(errorCallback);
            }
            ,

            queryUnderWayTask: function () {
                var url = apiurl.dataapiurl + "?msgtype=task_view_underway_get&msg={'openid':'" + sessionStorage.openid + "'}";
                var successCallback = (response) => {
                    if (response.status == 200) {
                        if (response.data.result === "success") {
                            console.log("getCardList success");
                            if (response.data.resultData.length === 0) {
                            } else {
                                this.TaskList = response.data.resultData;
                            }
                        } else {
                            console.log("getCardList failure:" + response.data.resultMsg);

                        }
                    }
                };
                var errorCallback = (err) => {
                    console.log('getCardList error:' + JSON.stringify(err));
                };
                this.axios.post(url).then(successCallback).catch(errorCallback);
            },
            queryDoneTask: function () {
                var url = apiurl.dataapiurl + "?msgtype=task_view_done_get&msg={'openid':'" + sessionStorage.openid +
                    "','page':'" + this.pageNum + "','pageSize':'"+this.pageSize+"'}";
                var successCallback = (response) => {
                    if (response.status == 200) {
                        if (response.data.result === "success") {
                            this.resultCount=response.data.resultCount;
                            if (this.pageNum ===Math.ceil(this.resultCount/this.pageSize)) {
                                this.loadingTextLable="数据加载完成";
                            }
                            if (response.data.resultData.length === 0) {
                            } else {
                                this.list = response.data.resultData;
                            }
                        } else {
                            console.log("getCardList failure:" + response.data.resultMsg);
                        }
                    }
                };
                var errorCallback = (err) => {
                    console.log('getCardList error:' + JSON.stringify(err));
                };
                this.axios.post(url).then(successCallback).catch(errorCallback);
            },
            getCustomerInfoByOpenId() {
                var msgtype = "customer_info_get";
                var msgdata = {};
                msgdata.openid = sessionStorage.openid;
                var msg = JSON.stringify(msgdata);
                var url = apiurl.getDataApiUrl(msgtype, msg);
                var successCallback = (response) => {
                    if (response.status == 200) {
                        if (response.data.result === "success") {
                            console.log(msgtype + " success");
                            this.userName = response.data.resultData.mobilePhone;
                            this.headimgurl = response.data.resultData.headimgurl;
                            this.userID = response.data.resultData.userID;
                        } else {
                            console.log(msgtype + " failure:" + response.data.resultMsg);
                        }
                    }
                };
                var errorCallback = (err) => {
                    console.log(msgtype + ' error:' + JSON.stringify(err));
                };
                this.axios.post(url).then(successCallback).catch(errorCallback);

            },
            setting() {
                this.$router.push({name: "UserCenter"});
            },
            gotoShop() {
                window.location.href = apiurl.mallurl + "/mall?uuid=" + this.userID;

            },
            myAccount() {
                window.location.href = apiurl.mallurl + "/uc?uuid=" + this.userID;
            },
            TaskTab(i) {
                if (i == 1) {
                    this.show = false;
                    this.pageNum=1;
                    this.loadData=0;
                    this.loadingTextLable='下拉加载数据';
                    this.queryDoneTask();
                } else {
                    this.show = true;
                    this.queryUnderWayTask();
                }
            },
            gotoFinish(index, url, name_en) {
                if (name_en === "knowjewel" || name_en === "myaccount") {
                    //我的商城
                    if(name_en==="knowjewel"){
                        window.location.href = apiurl.mallurl + "/mall?uuid=" + this.userID;
                    }
                    //我的账号
                    else if(name_en === "myaccount"){
                        window.location.href = apiurl.mallurl + "/uc?uuid=" + this.userID;
                    }
                    this.goKnowjewelOrKnowEquities(name_en);


                } else if (name_en === "sharecircle" || name_en === "sharefriend") {
                    this.$router.push({name: "ShareP1"});
                }
            },
            goKnowjewelOrKnowEquities: function (name_en) {
                Toast.loading({mask: true, message: "处理中"});
                var url = apiurl.dataapiurl + "?msgtype=finish_novice_task&msg={'openid':'" + sessionStorage.openid + "','name_en':'" + name_en + "'" + "}";
                var successCallback = (response) => {
                    Toast.clear();
                    if (response.status == 200) {
                        if (response.data.result === "success") {
                            this.queryUnderWayTask();
                            this.queryDoneTask();
                        }
                    }
                };
                var errorCallback = (err) => {
                    Toast.clear();
                    console.log('goKnowjewelOrKnowEquities error:' + JSON.stringify(err));
                };
                this.axios.post(url).then(successCallback).catch(errorCallback);
            }
        },
        mounted() {
            document.title = "魔方";
        }
    }
</script>

<style scoped >
    .loadingTextLable{
        line-height: 50px;
    }
    .loading-bar {
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

    .icon-loading {
        transform: rotate(0deg);
        animation-name: loading;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes loading
    {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }
    .van-tabs__line {
        background:   dimgray  ;
    }
    .top {
        height: 260px;
    }

    .tabTitle {
        background-color: white;
    }
    .loading-bar {
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

    .icon-loading {
        transform: rotate(0deg);
        animation-name: loading;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes loading
    {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }

    .user-msg {
        width: 100%;
        height: 160px;
        padding-top: 16px;
        position: relative;
        background: -webkit-linear-gradient(#ec6a57, #ee946e); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#ec6a57, #ee946e); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#ec6a57, #ee946e); /* Firefox 3.6 - 15 */
        background: linear-gradient(#ec6a57, #ee946e); /* 标准的语法 */
    }

    .user-img {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        float: left;
        margin: 0 15px 0 35px;
    }

    .user-name {
        width: 222px;
        height: 40px;
        line-height: 40px;
        color: white;
        margin-top: 10px;
        float: left;
        text-align: left;
    }

    .user-set {
        width: 26px;
        height: 26px;
        float: right;
        margin-right: 25px;
        margin-top: 15px;
    }

    .message {
        position: absolute;
        top: 93px;
        z-index: 2;
    }

    .message img {
        width: 100%;
        height: 166px;
        border-radius: 8px;
    }

    .btn-style {
        width: 90%;
        height: 68px;
        font-weight: bold;
        line-height: 68px;
        padding-left: 10%;
        margin: 5px 0px 12px 0px;
        border-radius: 5px;
        box-shadow: 0 1px 5px #ccc;
        position: relative;
        background-color: white;
    }

    .btn-style i {
        display: inline-block;
        width: 15%;
        height: 34px;
        background-image: url("../../assets/img/pageImg/shop.png");
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        position: absolute;
        left: 8%;
        top: 17px;
    }

    .btn-style i.userMoney {
        background-image: url("../../assets/img/pageImg/money.png");
    }

    .task-tab {
        width: 100%;
        box-shadow: 0 1px 5px #ddd;
        background-color: white;
    }

    .myTask {
        width: 100%;
        height: 33px;
        color: white;
        line-height: 33px;
        text-align: left;
        padding-left: 10px;
        background-image: url("../../assets/img/pageImg/myTest.png");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .TaskLine {
        height: 90px;
        border-bottom:1px solid #ddd;
    }

    .taskTime {
        height: 18px;
        width: 100%;
        line-height: 18px;
        border-radius: 2px;
        padding-left: 3px;
        padding-right: 3px;
        color: #ffffff;
        font-size: 12px;
        /*margin-top: 20px;*/
    }

    .taskTime1 {
        background: #ff6446;
    }

    .taskTime2 {
        background: #ffc040;
    }

    .taskTime3 {
        background: #41c557;
    }

    .taskShare {
        margin-top: 16px;
        text-align: left;
        padding-left: 2px;
    }

    .taskShare p {
        line-height: 25px;
        font-size: 1em;
        color: #535353;
    }

    .taskShare p span {
        font-size: 14px;
        color: #F86D5D;
        margin-left: 15px;
    }

    .taskShare p:nth-child(2) {
        font-size: 15px;
        color: #bababa;
    }

    .gotoTask {
        width: 100%;
        height: 23px;
        float: right;
        border-radius: 12px;
        border: 1px solid #F86D5D;
        /*margin-right: 13px;*/
        margin-top: 36px;
        font-size: 15px;
        color: #F86D5D;
        line-height: 23px;
    }

    .EndTask {
        border: none;
        color: #33C291;
    }
</style>

4.效果图

6.解释

6.1调用事件用@xxxx 如果是props里面的用:xx,反正我是一个新手，我是搞不清楚

6.2首先点击已完成的时候，查询第一页的数据，然后根据数据总数和每页展示的数量计算出页码

用来判断数据加载完成显示还是提示下拉加载数据

下拉的时候@bottom-pull="loadmore"这个来调用下一页数据展示的代码

我没有使用往上滑动的事件，有点复杂，需要设置一个map,对应的键值对大概是页码，页码对应的数据，每往上滑动的时候，页码改变，对应的list值变化，重新拼成最新的展示list,我的思路是这样子，没实践过。我没弄成这样子，我是滑到顶部的时候查询第一页，然后又重新加载数据:top-load-method="topChange"  

bug1，:top-load-method只能用一次，不管了。就这样子做。研究好久了。还是没完全弄好。

bug2图2上拉的时候使用:top-load-method哪个加载中的字会展示出来，不知道要怎么设置。

5.代码下载路径，不能执行，只能查看怎么使用，在本例子中代码都copy出来了。下载地址一样的代码

https://download.csdn.net/download/rendeyishi/10875577

6.主要是记录一下，能帮助大家就行，帮助不了我也很无奈。

 

 

 

round123_rr
关注
专栏目录
vue常用插件，可自定义选择。vue demo
surge
12-06 727
根据项目实际情况，选择合适的插件对项目进行开发。留了部分demo可供参考
vue -- -- --常用
qq_31889029的博客
09-20 471
一、UI组件及框架 　　element - 饿了么出品的Vue2的web UI工具套件 　　mint-ui - Vue 2的移动UI元素 　　iview - 基于 Vuejs 的开源 UI 组件库 　　vux-ui -Vue.js 移动端 UI 组件库 　　Keen-UI - 轻量级的基本UI组件合集 　　vue-material - 通过Vue Material和Vue 2建立精美...
用vue-pull-to完成手机端的上拉加载
weixin_43465244的博客
11-20 1963
安装vue-pull-to npm install vue-pull-to --save 在需要的组件中引用并注册 import PullTo from 'vue-pull-to' ... components: {PullTo}, 使用组件 &lt;pull-to :bottom-load-method="infiniteHandler" :is-top-bo...
vue-pull-to
qq_33144001的博客
06-14 391
vue-pull-to外层容器加 position: fixed; top: 0; left: 0; right: 0; bottom: 0; height：100% vue-scroller 不可以阻止上下拉
Vue-Pull-To 使用教程
最新发布
gitblog_00877的博客
08-09 281
Vue-Pull-To 使用教程 vue-pull-to⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件项目地址:https://gitcode.com/gh_mirrors/vu/vue-pull-to 项目介绍 Vue-Pull-To 是一个用于...
vue pull-to下拉滚动加载请求分页（无敌那）
热门推荐
feizhong_web的博客
05-29 1万+
因为移动端滚动加载分页是必须做的，网上也有很多插件，我用的是pull-to,这个很简单，先安装一波，npm install vue-pull-to --save//然后引进来,放在组件上面注册好import PullTo from 'vue-pull-to'官网文档在这里：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-C...
Vue-Pull-To vue的上拉加载，下拉刷新
jo_an_na的博客
06-07 7987
参考文档 https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md
vue pull-to下拉滚动加载请求分页
眾K的博客
02-13 349
npm install vue-pull-to --save //然后引进来,放在组件上面注册好 import PullTo from ‘vue-pull-to’ 官网文档在这里：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md 页面内容： <template> <div id="pullC...
vue轮播图插件vue-concise-slider的使用
08-27
Vue轮播图插件vue-concise-slider的使用 Vue轮播图插件vue-concise-slider是一个轻量级的滑动组件，配置简单，支持自适应/全屏+按钮+分页，同时兼容移动端和PC端版本。下面将详细介绍vue-concise-slider的使用和其...
滚动条插件vue-scroll
qq_44797702的博客
03-29 6786
vuescroll 是一个基于vue.js 2.X虚拟滚动条， 它支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。
推荐开源项目：Vue-Pull-To
gitblog_00052的博客
04-12 276
推荐开源项目：Vue-Pull-To vue-pull-to⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件项目地址:https://gitcode.com/gh_mirrors/vu/vue-pull-to 项目简介 是一个基于 Vue.js 的轻...
vue-pull-refresh-Vue.js 2.0的刷新刷新组件。-Vue.js开发
05-27
vue-pull-refresh vuejs 2.0针对移动设备实现的下拉刷新组件。 演示演示PS：请使用支持Promise用法的浏览器安装vue-pull-refresh vuejs 2.0用于移动设备的下拉刷新组件实现。 演示演示PS：请使用支持Promise用法的浏览器安装npm install vue-pull-refresh --save CommonJS var VuePullRefresh = require（'vue-pull-refresh'）; 新的Vue（{组件：{'vue-pull-refresh'：VuePullRefresh}，数据：function（）{return {};}，方法：{onRefresh：function（）{返回新的Promise（function（resolve，reject）{
vuepulltorefresh是Vue20上下拉刷新
08-11
vue-pull-to-refresh是Vue2.0 上下拉刷新
网页下拉刷新上拉加载插件（pull-to-refresh）完美修改版
12-05
iscroll插件的完全修改版，完美实现了上拉刷新，下拉加载等功能，附带实现分析数据，三个晚上的研究成果啊，最近缺分，求打赏啊
vue pull-to上拉加载
qypingi的博客
12-23 1326
js: import TopNav from ‘@/components/TopNav.vue’; import PullTo from ‘vue-pull-to’; const BOTTOM_DEFAULT_CONFIG = { pullText: '上拉加载', triggerText: '释放更新', loadingText: '加载中...', doneTe...
vue上拉加载
Bright2017的博客
10-17 6618
vue上拉加载
vxe-table vxe-pager 如何使用分页，自定义分页
我的博客
05-26 1万+
vxe-table 如何使用分页，自定义分页 表格和分页是两个不同的组件，可以搭配在一起使用，具体如下： <vxe-table show-overflow height="200" row-id="id" :loading="loading1" :data="tableData1"> <vxe-table-column type="checkbox" width="60"></vxe-table-column> <vxe-table-
vue-count-to插件使用方法
05-27
您好，关于vue-count-to插件的使用方法，您可以按照以下步骤进行： 1.首先，在您的Vue项目中安装vue-count-to插件，使用npm或yarn命令安装。 2.在您的Vue组件中引入vue-count-to插件，可以使用import语句引入。 3.在页面中使用vue-count-to，使用组件标签<vue-count-to></vue-count-to>包裹数字显示区域，在该标签中添加属性及事件，如下所示： <vue-count-to :startVal="0" //数字开始值 :endVal="100" //数字结束值 :duration="3000" //动画持续时间 :decimals="0" //小数位数 :format="format" //数字格式化函数 :useEasing="true" //是否启用缓动效果 :easingFn="easeOutCubic" //缓动效果种类 @callback="callback"> //完成后回调函数 </vue-count-to> 4. 在Vue组件中定义format格式化函数和callback回调函数。 5. 最后，在Vue页面及组件中使用vue-count-to插件，完成数字计数器的效果展示。 希望以上使用步骤可以帮助到您，如有疑问请随时与我沟通。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值