weex scroller滚动列表实践

weex 提供了<scroller>滚动组件，可以容纳子组件进行横向或竖向滚动。如果组件需要进行滚动，可以将 <scroller>当作根元素或者父元素使用，否则页面无法滚动（ <list> 组件除外， <list> 默认可以滚动）。

使用<scroller>滚动组件，需要注意点的：

• 不允许相同方向的 <list> 或者 <scroller> 互相嵌套，换句话说就是嵌套的 <list> / <scroller> 必须是不同的方向。
•  <scroller>需要显式的设置其宽高，可使用 position: absolute; 定位或 width、height 设置其宽高值。

子组件支持上，<scroller>支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下两个特殊组件作为子组件：

• <refresh>: 用于添加下拉刷新的功能。
• <loading>: 用于添加上拉加载更多的功能

使用滚动组件<scroller>具体需要注意的事项见scroller 简介

直接贴代码，利用<scroller>支持的<refresh>、<loading>组件实现，上拉加载下一页，下拉刷新的列表页。

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

<script>
  const modal = weex.requireModule('modal')

  export default {
    data () {
      return {
        loadinging: false,       
        refreshing: false,
        lists: [1, 2, 3, 4, 5],
        pullDownTipTxt: '下来刷新'                  // 下拉加载默认文案
      }
    },
    methods: {
      onloading (event) {
        console.log('--------onloading--------');
        modal.toast({ message: 'Loading', duration: 1 })
        this.loadinging = true
        setTimeout(() => {
          this.loadinging = false
        }, 2000)
      },
      onrefresh (event) {
        console.log('---------onrefresh------');
        modal.toast({ message: 'Refreshing', duration: 1 })
        this.refreshing = true;
        this.pullDownTipTxt = '刷新中...';
        this.lists = [];
        setTimeout(() => {
          this.refreshing = false
        }, 2000)
        this.getDataList();
      },
      onpullingdown (event) {    
        console.log('---------onpullingdown------');  
        if (event.pullingDistance > 50) {
          this.pullDownTipTxt = '松开立即刷新';
        } else {
          this.pullDownTipTxt = '下来刷新';
        }        
      },
      onloadmore: function (e) {
        const self = this;        
        console.log('---------onloadmore------');   
        this.getDataList();       
      },
      getDataList() {
        let data_list = Object.keys(Array.apply(null,{length: 5}));  // 随机生成5个数
        this.lists = this.lists.concat(data_list);
      }
    }
  }
</script>

<style scoped>
  .loading {
    width: 750;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
  }
  .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: #F5F5F5;
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>

 

参考资料：

scroller简介