weex：使用list实现下拉刷新和上拉加载更多

• 实现效果

• 方式一：使用loadmore

<template>
    <div>
        <list @loadmore="fetch" loadmoreoffset="10">
            <cell v-for="num in lists">
                <div class="panel">
                    <text class="text">{{num}}</text>
                </div>
            </cell>
        </list>
    </div>
</template>

<script>
/**
 使用系统组件
*/
var modal = weex.requireModule("modal");
export default {
  name: "listpage",
  data() {
    return {
      lists: [1, 2, 3, 4, 5]
    };
  },
  created() {},
  methods:{
      fetch(event){
        modal.toast({
            message:'loadmore',
            duration:1
        });
        setTimeout(()=>{
            const length=this.lists.length;
            for(let i=length;i<length+10;i++){
                this.lists.push(i+1);
            }
        },800)
      }
  }
};
</script>

<style scoped>
.panel {
  width: 680px;
  height: 300px;
  margin-left: 35px;
  margin-right: 35px;
  margin-top: 35px;
  margin-bottom: 35px;
  flex-direction: column;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  background-color: rgba(162, 217, 192, 0.2);
}
.text {
  font-size: 50px;
  text-align: center;
  color: #41b883;
}
</style>

• 方式二、使用refresh和loading

<template>
    <div>
        <list>
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">Refreshing...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell v-for="num in lists">
                <div class="panel">
                    <text class="text">{{num}}</text>
                </div>
            </cell>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
                <text class="indicator-text">Loading...</text>
            </loading>
        </list>
    </div>
</template>

<script>
/**
 使用系统组件
*/
var modal = weex.requireModule("modal");
export default {
  name: "listloading",
  data() {
    return {
      lists: [1, 2, 3, 4, 5],
      loadinging: false,
      refreshing: false
    };
  },
  created() {},
  methods: {
    onloading(event) {
      modal.toast({
        message: "loading",
        duration: 1
      });
      this.loadinging = true;
      setTimeout(() => {
        const length = this.lists.length;
        for (let i = length; i < length + 10; i++) {
          this.lists.push(i + 1);
        }
        this.loadinging = false;
      }, 2000);
    },
    onrefresh(event) {
      modal.toast({
        message: "refresh",
        duration: 1
      });
      this.refreshing = true;
      setTimeout(() => {
        this.lists = [1, 2, 3, 4, 5];
        this.refreshing = false;
      }, 2000);
    },
    onpullingdown(event) {
      modal.toast({
        message: "刚开始下拉....",
        duration: 1
      });
    }
  }
};
</script>

<style scoped>
.panel {
  width: 680px;
  height: 300px;
  margin-left: 35px;
  margin-right: 35px;
  margin-top: 35px;
  margin-bottom: 35px;
  flex-direction: column;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  background-color: rgba(162, 217, 192, 0.2);
}
.text {
  font-size: 50px;
  text-align: center;
  color: #41b883;
}
.indicator-text {
  font-size: 42px;
  text-align: center;
  width: 750px;
}
.indicator {
  margin-top: 16px;
  height: 60px;
  width: 60px;
  margin-left: 345px;
  color: blue;
}
</style>

由于weex进行了迭代，上面的可能跑不起来了！请看下面：

---

• 使用weex-ui实现项目可用列表

<template>
  <div>
    <nav-bar title="报名审批" />
    <list :class="['main-list']" offset-accuracy="300" loadmoreoffset="300">
      <refresh class="loading" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
        <wxc-part-loading :show="isShow"></wxc-part-loading>
        <text class="indicator-text">正在刷新数据...</text>
      </refresh>
      <cell v-for="(num,index) in lists" :key="index">
        <div class="panel">
          <text class="text">{{num}}</text>
        </div>
      </cell>
      <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
        <wxc-part-loading :show="isShow"></wxc-part-loading>
        <text class="indicator-text">正在加载中...</text>
      </loading>
    </list>
  </div>
</template>
<script>
import navBar from "../commons/navBar.vue";
const navigator = weex.requireModule("navigator");
var modal = weex.requireModule("modal");
import { WxcPartLoading } from "weex-ui";
import utils from "../../utils";
export default {
  name: "announcement",
  components: { navBar, WxcPartLoading },
  data() {
    return {
      isShow: true,
      refreshing: false,
      loadinging: false,
      lists: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    onrefresh(event) {
      modal.toast({
        message: "refresh",
        duration: 1
      });
      this.refreshing = true;
      setTimeout(() => {
        this.lists = [1, 2, 3, 4, 5];
        this.refreshing = false;
      }, 2000);
    },
    onloading(event) {
      modal.toast({ message: "Loading", duration: 1 });
      this.loadinging = true;
      setTimeout(() => {
        this.loadinging = false;
        const length = this.lists.length;
        for (let i = length; i < length + 10; i++) {
          this.lists.push(i + 1);
        }
      }, 2000);
    }
  }
};
</script>
<style scoped>
.main-list {
  position: fixed;
  top: 88px;
  bottom: 1px;
  left: 0;
  right: 0;
}
.loading {
  flex-direction: row;
  margin-top: 20px;
  margin-bottom: 20px;
}
.indicator-text {
  color: #52a3d8;
  font-size: 24px;
  text-align: center;
}

.panel {
  width: 600px;
  height: 250px;
  margin-left: 75px;
  margin-top: 35px;
  margin-bottom: 35px;
  flex-direction: column;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  border-color: #dddddd;
  background-color: #ffffff;
}
.text {
  font-size: 50px;
  text-align: center;
  color: #41b883;
}
</style>

• 效果