vue下拉自动刷新上拉加载更多 [-good-]

楼主^#

更多发布于：2018-12-02 20:32

组件：vue-scroller

git：https://github.com/wangdahoo/vue-scroller

demo：https://wangdahoo.github.io/vue-scroller/#/customSpinner

下载链接：https://unpkg.com/vue@2.1.10/dist/vue.min.js

https://unpkg.com/vue-scroller@2.2.0/dist/vue-scroller.min.js

使用方法：https://jsfiddle.net/wangdahoo/cpjfr096/

源码例子：

<html>
  <head>

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


<style>
   html, body {
   margin: 0;
   }

   * {
   box-sizing: border-box;
   }

   .row {
   width: 100%;
   height: 1.2rem;
   /*padding: 10px 0;*/
   font-size: .3rem;
   line-height: 1.2rem;
   text-align: center;
   color: #3f3f3f;
   background-color: #fff;
   margin: 0;
   }

   .grey-bg {
   background-color: #eee;
   }

   .header {
   position: fixed;
   top: 0;
   left: 0;
   height: 44px;
   width: 100%;
   box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
   background-color: #fff;
   z-index: 1000;
   color: #666;

   }

   .header > .title {
   font-size: 16px;
   line-height: 44px;
   text-align: center;
   margin: 0 auto;
   }
   .left{
   float: left;
   padding-left: .3rem;
   }
   .right{
   float: right;
   padding-right: .3rem;
   line-height: .6rem;
   width: 2.2rem;
   font-size: .24rem;
   }

</style>

  </head>
  <body class="easyui-layout">



   <div id="app">
   <div class="header">
   <h1 class="title">抽奖历史记录</h1>
   </div>
   <scroller :on-refresh="refresh"
   :on-infinite="infinite"
   ref="my_scroller"
   style="padding-top: 44px;">
   <div v-for="(item, index) in items" class="row" :class="{ 'grey-bg': index % 2 == 0 }">
   <span class="left">pw_ item.product_name </span>
   <span class="right">pw_ item.create_time </span>
   </div>
   </scroller>
   </div>

  </body>
  <script src="/public/common/js/jquery.min.js"></script>

  <script src="/public/common/js/vue.min.js"></script>


<script src="/public/common/js/vue-scroller.min.js"></script>
<script>
   var v1 = new Vue({
   el: '#app',

   data: {
   items: [],
   page:1
   },

   mounted: function () {

   },

   methods: {

   get_list: function (fn) {
   var data = { uid:getQueryString('uid'),token:getQueryString('token'),page:this.page };
   var self = this
   request("history",data,'post', function (data) {


   $.each(data.data, function (k,v) {
   self.items.push(v);
   })
   self.bottom += data.data.length;
   if(typeof (fn) == "function"){ fn(data.data.length==0); }
   }, function () {

   },false)
   },

   refresh: function (done) {
   var self = this
   self.page = 1;
   self.items=[];

   },

   infinite: function (done) {
   var self = this

   self.get_list(function (is_finish) {
   if(is_finish) {
   self.$refs.my_scroller.finishInfinite(2);
   return;
   }
   done();
   self.page = self.page + 1;
   });

   }
   }
   });
</script>

</html>

喜欢0

gogogo 管理员 UID25 粉丝0 关注0 发帖数1382 加关注写私信	沙发^# 发布于：2018-12-02 20:32 加载完成： self.$refs.my_scroller.finishInfinite(2);
	回复(0) 喜欢(0)

gogogo 管理员 UID25 粉丝0 关注0 发帖数1382 加关注写私信	板凳^# 发布于：2018-12-02 20:32 转自：https://blog.csdn.net/u010615629/article/details/80914443
	回复(0) 喜欢(0)

您需要登录后才可以回帖，登录或者注册

vue下拉自动刷新 上拉加载更多 [-good-]

最新喜欢：

vue下拉自动刷新上拉加载更多 [-good-]