列表 (bui-list)

框架中没有将列表封装成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. 2. 3.
  4. 文本内容 5.
  6.
  7. 8.
  9. 10.
• 左右图标列表，参考如下： 1. 2. 3.
  4. 5.
  6.
  7. {{item.title}} 8. {{item.subtitle}} 9.
  10.
  11. 12.
  13. 14.

cell样式引用

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

列表下拉刷新 & 加载更多

在list中嵌入refresh来实现列表下拉刷新的功能,再配合loading和loading-indicator实现加载更多功能 1. 2. 3. 4. 5. {{refreshText}} 6. 7.
8. 9.

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); 27. 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. }