• 列表 (bui-list)
    • 基础结构
    • 常用布局
    • cell样式引用
    • 列表下拉刷新 & 加载更多

    列表 (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.     }