# 移动端滚动加载组件

# rollingLoad:

# 属性

# height:Number

组件高度,默认值400。 该高度值一般不应超过整个屏幕的高度。在外部可以通过Global.get('winHeight')获取屏幕高度

# isWindow:Boolean

是否监听整个窗口,默认为false。 该组件支持两种监听模式,一种是window,一种是div。

# loading:Boolean

是否显示加载状态,默认为false

# statusText:加载状态

加载状态文本

# 方法

# start:启动监听

# stop:停止监听

# Rolling_data 滚动加载数据类

需求:

页码每次加载后自动+1;
加载新的页码后,以前的页码数据也要保留;
支持搜索(变更查询参数,数据清零、页码回1)

# 初始化参数

参数名 说明 默认值
api 接口地址
limit 每页数据量 10
paras 参数
mode Ajax提交方式 get

# 属性

属性名 说明 默认值
api 接口地址
limit 每页数据量 10
paras 参数
mode Ajax提交方式 get
dataList 数据结果
pageNum 当前页码
totalPage 总页码
isEmpty 是否没有任何数据
isEnd 是否已到达最后一页
loading 是否加载中
text 加载状态文本 对象,包含3个属性,loading,end,empty
status 状态
total 记录总数

# 方法

方法名 说明 参数
load 加载下一页数据
search 加载新的查询参数,调用clear后、返回load {Object}newPara:新的查询参数
clear 初始化,数据清零,页码归1,主要用于重新加载

# DEMO

import {rollingData} from "sjfx/mobile";

const store = new rollingData({
	api: Config.adminApi,
	limit: 15,
	paras: {}
});
store.load();

v-for="item of store.dataList"

# 完整DEMO

<template>
<div>
    <search :auto-fixed="false"
            @on-submit="search"
            @on-cancel="unSearch"
    ></search>
      <rolling-load ref="rollingLoad"
                    v-on:on-next="load"
                    :height="height"
                    :loading="store.loading"
                    :statusText="store.status"
      >
      <div
        v-for="item of store.dataList"
        :key="item.id"
      >
      </div>
  </rolling-load>
  
</div>
</template>

<script>
  import Config from '@/config';
  import {DateTool,Global} from 'sjfx';
  import {rollingData, rollingLoad} from 'sjfx/mobile';

  export default {
    name: "order",
    components: {
      rollingLoad,
    },
    data: function () {
      return {
        store: new rollingData({
          api: Config.adminApi,
          limit: 15,
          paras: {}
        }),
        height: Global.get('winHeight') - 50,
        searchPara: {},
      }
    },
    created() {
      this.load();
    },
    methods: {
      load: function () {
        this.store.load(this.searchPara).then(data => {
          if (this.store.isEnd) {
            this.$refs.rollingLoad.stop();
          }
          data.forEach((item) => {
            item.addtime = DateTool.parse(item.addtime).format('yyyy-MM-dd')
          })
        });
      },
    }
  }
</script>

# 带切换的DEMO

<template>
  <div>
    <div class="activity-tab main-item">
      <div class="activity-tab-item main-item-content"
           v-for="item of typeList"
           :key="item.value"
           :class="{'active':item.value===type}"
           @click="changeType(item)"
      >
        <img :src="'/static/images/menu/'+item.ico">
        <p>{{item.label}}</p>
      </div>
      <!--
      <div class="activity-tab-item main-item-content">
        <img src="../../../static/images/menu/activity_icon_more.png">
        <p>其他</p>
      </div>
      -->
    </div>
    <div class="activity-content">

      <rolling-load ref="rollingLoad"
                    v-on:on-next="load"
                    :height="height"
                    :loading="store.loading"
                    :statusText="store.status"
      >
        <div v-for="item of store.dataList" :key="item.id">
          <sec-kill-list-item v-if="item.type===1" :item="item" v-on:changeSub="changeSub"></sec-kill-list-item>
          <cut-list-item v-if="item.type===2" :item="item" v-on:changeSub="changeSub"></cut-list-item>
          <group-list-item v-if="item.type===3" :item="item" v-on:changeSub="changeSub"></group-list-item>
        </div>
      </rolling-load>

    </div>
  </div>
</template>

<script>
  Number.prototype.format = function () {
    return '';
  };
  import Config from './config';
  import cutListItem from './cut/listItem';
  import groupListItem from './group/listItem';
  import secKillListItem from './secKill/listItem';
  import {rollingData, rollingLoad} from 'sjfx/mobile';

  import {Global, Ajax, layer} from 'sjfx';

  export default {
    name: "index",
    components: {
      cutListItem,
      groupListItem,
      secKillListItem,
      rollingLoad,
    },
    data() {
      return {
        type: 0,
        typeList: [{
          value: 0,
          label: '全部',
          ico: 'activity_icon_all.png'
        },
          ...Config.typeList
        ],

        store: new rollingData({
          api: Config.apiUrl('/Activity/List'),
          limit: 5,
          //预定义的参数
          paras: {
            type: 0
          }
        }),
        height: Global.get('winHeight') - 50,
      }
    },
    created() {
      this.$setTitle('活动');
      this.load();
    },
    methods: {
      /**
       * 改变类型时触发
       */
      changeType(newType) {
        if (newType.value !== this.type) {
          this.type = newType.value;
          this.store.search({
            type: this.type
          }).then(this.afterLoad);
          this.$refs.rollingLoad.start();
        }
      },
      /**
       * 加载分页数据
       */
      load: function () {
        this.store.load(this.searchPara).then(this.afterLoad);
      },
      /**
       * 加载完成后对分页数据进行处理
       */
      afterLoad(data) {
        const now = new Date();
        data.convertTime();
        if (this.store.isEnd) {
          this.$refs.rollingLoad.stop();
        }
        data.forEach(item => {
          if (item.startTime < now) {
            item.statusText = '未开始';
          } else if (item.endTime > now) {
            item.statusText = '进行中';
          } else {
            item.statusText = '已结束';
          }
        })
      },
      /**
       * 预约/取消预约
       */
      changeSub(item) {
        Ajax.get(Config.apiUrl('/Activity/Sub', {
          activityId: item.id,
          status: !item.hasSub
        })).then(() => {
          item.hasSub = !item.hasSub;
          if (item.hasSub) {
            layer.toptip('您已预约该活动', 'success');
          } else {
            layer.toptip('您已取消预约', 'warning');
          }
        })
      },
    }
  }
</script>

<style>
  @import "../../../static/css/activity/activityCss.css";
</style>

Last Updated: 1/14/2020, 12:00:52 PM