首页 > 其他 > 详细

vue 下拉刷新数据的插件的使用:

时间:2019-10-23 16:16:04      阅读:82      评论:0      收藏:0      [点我收藏+]

1.安装:

npm i vue-scroller -S

npm install vue-scroller -D

 

2.在需要加载的页面中引入,或在公共js文件中引入:

import VueScroller from ‘vue-scroller‘

Vue.use(VueScroller)

 

3.在模板中使用:

<scroller :on-refresh="refresh" :on-infinite="infinite" > </scroller>

:on-refresh:下拉刷新 :on-infinite:上拉加载

另一种在模板中的用法:

<!-- 下拉的代码段:使用VuePullRefresh标签嵌套 :on-refresh="onRefresh"表示下拉时要执行的方法
	method:{onRefresh:function(){}} -->
        <VuePullRefresh :on-refresh="onRefresh">
            <!-- 使用v-for更新已渲染过的元素列表 为防止v-for报错, 一定要v-bind绑定key key是唯一的,指向列表中每个元素的唯一值 -->
            <div class="info url log" v-for="(item,index) in moreListData" :key="index">
                <div class="poster">
                    <img :src="item.pic_big" :alt="item.title">
                </div>
                <div class="text-wrap">
                    <div class="title">{{ item.title }}</div>
                    <div class="author">{{ item.artist_name }}</div>
                </div>
            </div>
        </VuePullRefresh>

  

 

vue 下拉刷新数据的插件的使用:

原文:https://www.cnblogs.com/677a/p/11726059.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!