list-view 中 cell-type-key 属性如何与 cell 搭配使用？？？

BIP720676

list-view 中 cell-type-key 属性如何与 cell 搭配使用？？？

技术咨询-特特

我这边确认一下

BIP720676

可以解决吗？

技术咨询-特特 · 2022-8-29 09:45我这边确认一下

技术咨询-特特

我让开发给你看下，稍等

武强q

1. <template>
   
2.         <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}
   
3.                 cell-type-key="type">
   
4.                 <cell class="cell1" onclick={this.itemClick} cell-type="1111">
   
5.                         <text class="title">1111{item.title}</text>
   
6.                         <text class="subtitle">{item.subtitle}</text>
   
7.                 </cell>
   
8.                 <cell class="cell2" onclick={this.itemClick} cell-type="2222">
   
9.                         <text class="title">2222{item.title}</text>
   
10.                         <text class="subtitle">{item.subtitle}</text>
    
11.                 </cell>
    
12.                 <cell class="cell2" onclick={this.itemClick} cell-type="3333">
    
13.                         <text class="title">3333{item.title}</text>
    
14.                         <text class="subtitle">{item.subtitle}</text>
    
15.                 </cell>
    
16.                 <list-footer class="footer">
    
17.                         <text>加载中...</text>
    
18.                 </list-footer>
    
19.         </list-view>
    
20. </template>
    
21. <style>
    
22. .main {
    
23.         width: 100%;
    
24.         height: 100%;
    
25. }
    
26. .cell1 {
    
27.         padding: 8px;
    
28.         height: 60px;
    
29.         border-bottom: 0.5px solid rgb(91, 190, 60);
    
30.         background-color: rgb(241, 82, 82);
    
31. }
    
32. .cell2 {
    
33.         padding: 8px;
    
34.         height: 60px;
    
35.         border-bottom: 0.5px solid #ddd;
    
36.         background-color: rgb(104, 33, 235);
    
37. }
    
38. .cell:active {
    
39.         background-color: #ddd;
    
40. }
    
41. .title {
    
42.         font-weight: bold;
    
43.         font-size: 18px;
    
44.         color: #000;
    
45. }
    
46. .subtitle {
    
47.         color: #333;
    
48. }
    
49. .footer {
    
50.         justify-content: center;
    
51.         align-items: center;
    
52. }
    
53. </style>
    
54. <script>
    
55. export default {
    
56.         name: 'test',
    
57.         methods: {
    
58.                 apiready() {
    
59.                         this.initData(false);
    
60.                 },
    
61.                 initData(loadMore) {
    
62.                         var that = this;
    
63.                         var skip = that.dataList ? that.dataList.length : 0;
    
64.                         var dataList = [];
    
65.                         for (var i = 0; i < 20; i++) {
    
66.                                 dataList[i] = {
    
67.                                         title: '项目' + (i + skip),
    
68.                                         subtitle: '这里是子标题',
    
69.                                         type: i % 2 === 0 ? '1111' : '2222'
    
70.                                 };
    
71.                         }
    
72.                         var listView = document.getElementById('listView');
    
73.                         if (loadMore) {
    
74.                                 that.dataList = that.dataList.concat(dataList);
    
75.                                 listView.insert({
    
76.                                         data: dataList
    
77.                                 });
    
78.                         } else {
    
79.                                 that.dataList = dataList;
    
80.                                 listView.load({
    
81.                                         data: dataList
    
82.                                 });
    
83.                         }
    
84.                 },
    
85.                 onscrolltolower() {
    
86.                         this.initData(true);
    
87.                 },
    
88.                 itemClick(e) {
    
89.                         api.alert({
    
90.                                 msg: '当前项索引：' + e.currentTarget.index
    
91.                         });
    
92.                 }
    
93.         }
    
94. };
    
95. </script>
    

复制代码

首先list-view在渲染内部的cell当有多种cell时，也就是你需要展示多种cell的种类或样式，这时会默认渲染第一种类型的cell，这样就无法展示其他类型的cell。使用cell-type-key字段绑定数组中的变量，可以理解是一个key，当cell-type中的值等于这个key时就会显示出来。这种渲染方式的好处是提高原生中的渲染性能。