weex之列表

本文讲一下weex列表功能的实现。本文基于vue进行。

1、基础知识：

本文要对html css js vue相关的知识做到了解的程度。对weex做到熟悉的程度。

2、weex 列表标签  list

<list> 组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，
非常适合用于长列表的展示。最简单的使用方法是在 <list> 标签内使用一组由简单数组循环生成的
<cell> 标签填充。

cell标签

Cell 必须以一级子组件的形式存在于 listrecyclerwaterfall 中。

以上是weex官方给出的解释。

https://weex.apache.org/zh/docs/components/cell.html#%E7%AE%80%E4%BB%8B

 

3、首先实现一个简单的列表：

 

 

<template>
  <div class="rootstyle">
    <list>
     
      <cell class="panel" v-for="(num, index) in lists" :key="index">
        <text class="text">{{num}}</text>
      </cell>
      
    </list>
  

  </div>
</template>


<script>
export default {
  data() {
    return {
      lists: [1, 2, 3, 4]
    
    };
  }
}
</script>


<style scoped>
.panel {
  width: 750px;
  font-size: 14px;
  padding: 12px;
  margin-left: 75px;
  margin-top: 35px;
  margin-bottom: 35px;
  flex-direction: row;
  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;
}
.rootstyle {
  width: 750px;
  height: 700px;
}
</style>

效果图：

 

列表的基本显示已经实现了，还有加上先拉加载和下拉刷新。

4、上拉加载 loading

<loading> 为容器提供上拉加载功能。

 

<template>
  <div class="rootstyle">
    <list>
    
      <cell class="panel" v-for="(num, index) in lists" :key="index">
        <text class="text">{{num}}</text>
      </cell>
      <loading @loading="loadmore" :display="load">
        <text>Loading</text>
      </loading>
    </list>
  

  </div>
</template>



<script>
const modal = weex.requireModule("modal");
export default {
  data() {
    return {
      lists: [1, 2, 3, 4],
      load: "hide",
      fresh:'hide',

    };
  },
 
  methods: {
    loadmore(event) {
      modal.toast({
        message: "start loadmore",
        duration: 0.3,
      });
      this.load = "show";
      setTimeout(() => {
        const length = this.lists.length;
        for (let i = length; i < length+5; i++) {
          this.lists.push(i + 1);
        }
        this.load = "hide";
      }, 800);
       modal.toast({
        message: "loadmore finish",
        duration: 0.3,
      });
    },
  },
};
</script>

 

 

 

5、下拉刷新 refresh

<refresh> 为容器提供下拉刷新功能。

 

<template>
  <div class="rootstyle">
    <list>
      <refresh @refresh="onrefresh" :display="fresh">
        <text>refresh</text>
      </refresh>
      <cell class="panel" v-for="(num, index) in lists" :key="index">
        <text class="text">{{num}}</text>
      </cell>
      <loading @loading="loadmore" :display="load">
        <text>Loading</text>
      </loading>
    </list>
  

  </div>
</template>




<script>
const modal = weex.requireModule("modal");
export default {
  data() {
    return {
      lists: [1, 2, 3, 4],
      load: "hide",
      fresh:'hide',

    };
  },
 
  methods: {
    loadmore(event) {
      modal.toast({
        message: "start loadmore",
        duration: 0.3,
      });
      this.load = "show";
      setTimeout(() => {
        const length = this.lists.length;
        for (let i = length; i < length+5; i++) {
          this.lists.push(i + 1);
        }
        this.load = "hide";
      }, 800);
       modal.toast({
        message: "loadmore finish",
        duration: 0.3,
      });
    },
    onrefresh(event) {
      this.fresh = "show"
      modal.toast({
          message: "start refresh",
          duration: 0.3,
        });
      setTimeout(() => {
         const length = this.lists.length;
        for (let i = length; i < length+5; i++) {
          this.lists.push(i + 1);
        }
          this.fresh = "hide"
      }, 800);
       modal.toast({
          message: "refresh finish",
          duration: 0.3,
        });
    },
  },
};
</script>

 

本文完！