列表 (bui-list)

列表(bui-list) - 图1   列表(bui-list) - 图2

框架中没有将列表封装成component，而是以样式的方式提供出来给开发者使用。Weex基于 list组件和 cell组件能够创建平滑的列表效果。请参考weex官方文档: 【list】【cell】【refresh】【loading】

Example:bui-list

基础结构

  1. <list class="bui-list">
  2.      <cell class="bui-cell" v-for="item in listData">
  3.           <div class="bui-list-main">
  4.             ...
  5.           </div>
  6.           <div class="bui-list-right">
  7.             ...
  8.           </div>
  9.       </cell>
  10. </list>

常用布局

  • 普通文本列表，参考如下：

    1. <list class="bui-list">
    2.     <cell class="bui-cell" v-for="item in listData" @click="jumpTo(item)" @longpress="onLongpress">
    3.         <div class="bui-list-main">
    4.             <text class="bui-list-title">文本内容</text>
    5.         </div>
    6.         <div class="bui-list-right">
    7.             <bui-icon name="icon-go"></bui-icon>
    8.         </div>
    9.     </cell>
    10. </list>

  • 左右图标列表，参考如下：

    1. <list class="bui-list">
    2.     <cell class="bui-cell-large" v-for="item in messageList" v-on:swipe="onSwpie()">
    3.         <div class="bui-list-left">
    4.             <bui-image class="bui-list-thumb" radius="50px" v-bind:src="item['l-icon']"></bui-image>
    5.         </div>
    6.         <div class="bui-list-main">
    7.             <text class="bui-list-title">{{item.title}}</text>
    8.             <text class="bui-list-subtitle">{{item.subtitle}}</text>
    9.         </div>
    10.         <div class="bui-list-right">
    11.                 <bui-icon name="icon-go"></bui-icon>
    12.         </div>
    13.     </cell>
    14. </list>

cell样式引用

列表的高度的大小由 <cell> 层的类样式来控制，框架提供了3个class，bui-cell,bui-cell-large,bui-cell-xlarge，也可以自行编写样式来控制cell的样式。参考如下：

  1. <list class="bui-list">
  2.   <cell class="bui-cell | bui-cell-large | bui-cell-xlarge">
  3.   </cell>
  4. </list>

列表下拉刷新 & 加载更多

在list中嵌入refresh来实现列表下拉刷新的功能,再配合loading和loading-indicator实现加载更多功能

  1. <list class="bui-list" @loadmore="onLoadmore($event)" loadmoreoffset="2">
  2.     <!--刷新组件-->
  3.     <refresh class="bui-refresh" @refresh="onRefresh" @pullingdown="onPullingdown($event)" :display="refreshing ? 'show' : 'hide'">
  4.         <bui-icon :name="refreshIcon" size="40px" style="margin-right: 5px;"></bui-icon>
  5.         <text class="bui-refresh-indicator">{{refreshText}}</text>
  6.     </refresh>
  7.     <!--列表内容组件-->    
  8.     <cell class="bui-cell-xlarge" v-for="i in list">
  9.         <div class="bui-list-main">
  10.             <text class="bui-list-title">第{{i}}行数据</text>
  11.         </div>
  12.     </cell>
  13.     <!--加载更多-->
  14.     <loading class="bui-loading" @loading="onLoading" :display="showLoading ? 'show' : 'hide'">
  15.         <text class="bui-loading-indicator" v-if="showLoading">{{loadingText}}</text>
  16.         <loading-indicator class="bui-indicator"></loading-indicator>
  17.     </loading>
  18. </list>

JS 关键代码如下：

  1.     export default {
  2.         data: function () {
  3.             return {
  4.                 LOADMORE_COUNT: 4,
  5.                 LOADMORE: [7, 8, 9, 9, 10],
  6.                 refreshing: false,
  7.                 showLoading: false,
  8.                 refreshIcon: "icon-todown",
  9.                 refreshText: "下拉刷新...",
  10.                 loadingText: "加载更多数据...",
  11.                 list: [1, 2, 3, 4, 5],
  12.                 newList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  13.             }
  14.         },
  15.         methods: {
  16.             //refresh下拉放手后的文字与图标
  17.             "onRefresh": function (e) {
  18.                 this.refreshing = true;
  19.                 //下面代码是模拟异步请求效果
  20.                 setTimeout(() => {
  21.                     this.refreshIcon = "icon-checkbox-on";
  22.                     this.refreshText = "刷新成功";
  23.                     setTimeout(() => {
  24.                         this.refreshing = false;
  25.                         this.list = this.newList;
  26.                     }, 300);
  28.                 }, 500);
  29.             },
  30.             //refresh下拉放手前的文字与图标
  31.             "onPullingdown": function (e) {
  32.                 //默认refresh文字与图标
  33.                 this.refreshIcon = "icon-todown";
  34.                 this.refreshText = "下拉可以刷新...";
  35.                 //下拉一定距离时文字与图标
  36.                 if (Math.abs(e.pullingDistance) > 60) {
  37.                     console.log("松开即可刷新");
  38.                     this.refreshIcon = "icon-toup";
  39.                     this.refreshText = "松开即可刷新...";
  40.                 }
  41.             },
  42.             "onLoading": function (e) {
  43.                 buiweex.toast("loading");
  44.                 this.showLoading = true;
  45.                 setTimeout(() => {
  46.                     const length = this.list.length;
  47.                     this.showLoading = false;
  48.                     if (length > 60) {
  49.                         this.loadingText = '没有更多数据了'
  50.                         return
  51.                     } else {
  52.                         this.loadingText = '加载更多数据...'
  53.                         for (let i = length; i < length + this.LOADMORE_COUNT; ++i) {
  54.                             this.list.push(i + 1)
  55.                         }
  56.                     }
  57.                 }, 2000);
  58.             }
  59.         }
  60.     }