list-view 标签使用update方法

BIP57792

list-view 标签使用update 方法后界面绘制出来了后直接闪退，update 里面是对象数组

技术咨询-特特

发一下能复现你问题的简化版代码，

BIP57792

1. <template>
   
2.         <view class="page">
   
3. 
   
4. 
   
5. 
   
6. 
   
7.                 <view class="diss_list_bg">
   
8. 
   
9.                         <view class="diss_list_biao"></view>
   
10.                         <view class="diss_list_lun_bg">
    
11.                                 <view class="diss_list_lun_bg1">
    
12.                                         <view class="diss_list_lun_bg2">
    
13.                                                 <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
    
14.                                                 <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
    
15.                                                 <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
    
16. 
    
17.                                         </view>
    
18. 
    
19.                                         <text class="diss_list_lun_text">354评论</text>
    
20.                                 </view>
    
21.                                 <image class="diss_list_lun_bg_img1" src="../../image/friend/Vectorclose.png" />
    
22.                         </view>
    
23. 
    
24. 
    
25.                         <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
    
26.                                 <cell class="cell" onclick={this.itemClick}>
    
27.                                         <view class="cell1">
    
28.                                                 <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
    
29. 
    
30.                                                 <view class="listView_text">
    
31.                                                         <text class="listView_text1"> Philip Schultz </text>
    
32.                                                         <text class="listView_text2"> 说明这是一款注定要火的游戏 </text>
    
33.                                                         <view class="listView_text_more" @click="itemClickmore">
    
34.                                                                 <text> 更多</text>
    
35.                                                                 <image class="diss_list_lun_bg2_img" src="../../image/person/Groupxuan.png" />
    
36.                                                         </view>
    
37.                                                 </view>
    
38.                                                 <text class="title">{item.title}</text>
    
39. 
    
40.                                         </view>
    
41. 
    
42.                                         <view v-for="(itemlun,index) in item.pinlun" :data-index="index" class="cell2">
    
43.                                                 <image class="diss_list_lun_bg2_img1" src="../../image/collect/ic_headIcon.png" />
    
44.                                                 <view class="listView_text">
    
45.                                                         <text class="listView_text1"> Philip Schultz </text>
    
46.                                                         <text class="listView_text2"> {itemlun.desc} </text>
    
47.                                                 </view>
    
48.                                                 <text class="title">{itemlun.diss_title}</text>
    
49. 
    
50.                                         </view>
    
51. 
    
52. 
    
53.                                         <!-- <view v-if="item.pinlun" :data-index="index" class="cell2">
    
54.                                                 <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
    
55.                                                 <view class="listView_text">
    
56.                                                         <text class="listView_text1"> Philip Schultz </text>
    
57.                                                         <text class="listView_text2"> {item.pinlun.desc} </text>
    
58.                                                 </view>
    
59.                                                 <text class="title">{item.pinlun.diss_title}</text>
    
60. 
    
61.                                         </view> -->
    
62. 
    
63.                                 </cell>
    
64. 
    
65.                         </list-view>
    
66. 
    
67. 
    
68. 
    
69.                 </view>
    
70.                 <view class="input_diss_bg ">
    
71. 
    
72.                         <view class="input_diss_bg1">
    
73.                                 <input class="input_diss" placeholder-style="color:#B6B6B6" style="padding-left:5px" type="text"
    
74.                                         :placeholder="placeholderPhone"></input>
    
75.                                 <image class="input_diss_img" src="../../image/friend/xiao.png" />
    
76. 
    
77.                         </view>
    
78. 
    
79.                 </view>
    
80. 
    
81. 
    
82.         </view>
    
83. </template>
    
84. <script>
    
85. 
    
86. export default {
    
87.         name: 'main',
    
88. 
    
89.         apiready() { //like created
    
90.                 this.initData();
    
91.                 // this.initlist();
    
92.         },
    
93.         data() {
    
94.                 return {
    
95.                         placeholderPhone: "内容",
    
96.                         valuePhone: "",
    
97.                         dataList: [{
    
98.                                 title: '项目1',
    
99.                                 desc: "说明这是一款注定要火的游戏",
    
100.                                 diss: true,
     
101.                                 pinlun: [
     
102.                                         {
     
103.                                                 diss_title: '评论1',
     
104.                                                 desc: "说明这是一款注定要火的游戏",
     
105.                                         },
     
106.                                         {
     
107.                                                 diss_title: '评论2',
     
108.                                                 desc: "说明这是一款注定要火的游戏",
     
109.                                         },
     
110.                                         {
     
111.                                                 diss_title: '评论3',
     
112.                                                 desc: "说明这是一款注定要火的游戏",
     
113.                                         },
     
114. 
     
115. 
     
116.                                 ]
     
117.                         },
     
118.                         {
     
119.                                 title: '项目2',
     
120.                                 desc: "说明这是一款注定要火的游戏",
     
121.                                 diss: false,
     
122.                                 pinlun: []
     
123. 
     
124.                         },
     
125.                         {
     
126.                                 title: '项目3',
     
127.                                 desc: "说明这是一款注定要火的游戏",
     
128.                                 diss: false,
     
129.                                 pinlun: []
     
130. 
     
131.                         },
     
132.                         {
     
133.                                 title: '项目4',
     
134.                                 desc: "说明这是一款注定要火的游戏",
     
135.                                 diss: false,
     
136.                                 pinlun: []
     
137.                         },
     
138.                         {
     
139.                                 title: '项目5',
     
140.                                 desc: "说明这是一款注定要火的游戏",
     
141.                                 diss: false,
     
142.                                 pinlun: []
     
143.                         },
     
144.                         {
     
145.                                 title: '项目6',
     
146.                                 desc: "说明这是一款注定要火的游戏",
     
147.                                 diss: false,
     
148.                                 pinlun: []
     
149.                         },
     
150.                         {
     
151.                                 title: '项目7',
     
152.                                 desc: "说明这是一款注定要火的游戏",
     
153.                                 diss: false,
     
154.                                 pinlun: []
     
155.                         }
     
156. 
     
157. 
     
158.                         ]
     
159.                 };
     
160.         },
     
161.         methods: {
     
162. 
     
163. 
     
164. 
     
165. 
     
166. 
     
167.                 initData() {
     
168. 
     
169.                         var dataList = this.dataList;
     
170. 
     
171.                         var listView = document.getElementById('listView');
     
172. 
     
173.                         // console.log("dataList" + JSON.stringify(dataList));
     
174.                         listView.load({
     
175.                                 data: dataList
     
176.                         });
     
177.                 },
     
178.                 onscrolltolower() {
     
179.                         // this.initData(true);
     
180.                 },
     
181. 
     
182.                 itemClickmore(e) {
     
183. 
     
184.                         var that = this;
     
185.                         var listView = document.getElementById('listView');
     
186. 
     
187.                         var id = e.currentTarget.index;
     
188.                         this.dataList[id].diss = !this.dataList[id].diss;
     
189.                         if (!this.dataList[id].diss) {
     
190.                                 this.dataList[id].pinlun = [];
     
191.                         } else {
     
192.                                 var pinlin = [{
     
193.                                         diss_title: '评论5',
     
194.                                         desc: "说明这是一款注定要火的游戏",
     
195.                                 },
     
196.                                 {
     
197.                                         diss_title: '评论6',
     
198.                                         desc: "说明这是一款注定要火的游戏",
     
199.                                 },
     
200.                                 {
     
201.                                         diss_title: '评论7',
     
202.                                         desc: "说明这是一款注定要火的游戏",
     
203.                                 },
     
204. 
     
205.                                 ];
     
206.                                 this.dataList[id].pinlun = pinlin;
     
207.                         }
     
208.                         var datalist1 = this.dataList[id];
     
209. 
     
210.                         // {
     
211.                         //         diss_title: '评论1',
     
212.                         //         desc: "说明这是一款注定要火的游戏",
     
213.                         // },
     
214.                         // {
     
215.                         //         diss_title: '评论1',
     
216.                         //         desc: "说明这是一款注定要火的游戏",
     
217.                         // },
     
218.                         // {
     
219.                         //         diss_title: '评论1',
     
220.                         //         desc: "说明这是一款注定要火的游戏",
     
221.                         // }
     
222. 
     
223. 
     
224. 
     
225. 
     
226. 
     
227. 
     
228.                         // console.log("更多" + id + JSON.stringify(this.dataList));
     
229. 
     
230.                         try {
     
231.                                 // listView.load({
     
232.                                 //         data: datalist1
     
233.                                 // });
     
234. 
     
235.                                 listView.update({
     
236.                                         item: datalist1,
     
237.                                         index: id
     
238.                                 }, function (ret) {
     
239.                                         console.log("error------" + ret);
     
240. 
     
241.                                 })
     
242. 
     
243.                         } catch (error) {
     
244.                                 console.log("error" + error);
     
245. 
     
246.                         }
     
247. 
     
248.                 },
     
249. 
     
250.                 itemClick(e) {
     
251.                         api.alert({
     
252.                                 msg: '当前项索引：' + e.currentTarget.index
     
253.                         });
     
254.                 }
     
255. 
     
256.         }
     
257. };
     
258. </script>
     
259. <style>
     
260. .page {
     
261.         height: 100%;
     
262.         background-color: black;
     
263. }
     
264. .diss_list_bg {
     
265.         background: #313139;
     
266.         border-radius: 31.5px;
     
267.         position: absolute;
     
268.         height: 35rem;
     
269.         width: 100%;
     
270.         bottom: 0%;
     
271.         flex-direction: column;
     
272.         /* justify-content: center; */
     
273.         align-items: center;
     
274. }
     
275. .diss_list_biao {
     
276.         background: #525255;
     
277.         border-radius: 100px;
     
278.         height: 3px;
     
279.         width: 63px;
     
280.         position: absolute;
     
281.         top: 1rem;
     
282. }
     
283. .diss_list_lun_bg {
     
284.         position: absolute;
     
285.         top: 7%;
     
286.         flex-direction: row;
     
287.         align-items: center;
     
288.         justify-content: space-between;
     
289.         width: 20rem;
     
290.         height: 34px;
     
291.         /* background: #12128a; */
     
292.         /* padding-right: 0.5rem; */
     
293. }
     
294. .diss_list_lun_bg1 {
     
295.         width: 18rem;
     
296.         height: 34px;
     
297.         background: #3c3c3e;
     
298.         border-radius: 57px;
     
299.         flex-direction: row;
     
300.         align-items: center;
     
301.         justify-content: space-between;
     
302.         background-position: left initial top initial;
     
303.         margin-right: 0px;
     
304.         margin-left: 0px;
     
305.         padding-left: 10px;
     
306.         padding-right: 10px;
     
307. }
     
308. .diss_list_lun_bg_img1 {
     
309.         width: 1rem;
     
310.         height: 1rem;
     
311. }
     
312. .diss_list_lun_text {
     
313.         color: #838383;
     
314.         font-size: 13px;
     
315. }
     
316. .diss_list_lun_bg2 {
     
317.         width: 5rem;
     
318.         height: 34px;
     
319.         flex-direction: row;
     
320.         align-items: center;
     
321.         position: relative;
     
322.         /* align-items: flex-start; */
     
323.         /* justify-content: left; */
     
324. }
     
325. 
     
326. .listView_text_more {
     
327.         flex-direction: row;
     
328.         align-items: center;
     
329. }
     
330. .diss_list_lun_bg2_img {
     
331.         width: 1.6rem;
     
332.         height: 1.5rem;
     
333.         /* margin: 0px -0.4rem; */
     
334.         margin-right: -0.4rem;
     
335.         /* margin-left: 1rem; */
     
336.         /* position: absolute; */
     
337. }
     
338. 
     
339. .diss_list_lun_bg2_img1 {
     
340.         width: 1.7rem;
     
341.         height: 1.3rem;
     
342.         /* margin: 0px -0.4rem; */
     
343.         margin-right: -0.4rem;
     
344.         /* margin-left: 1rem; */
     
345.         /* position: absolute; */
     
346. }
     
347. .input_diss_bg {
     
348.         width: 100%;
     
349.         height: 90px;
     
350.         background-color: black;
     
351.         position: absolute;
     
352.         bottom: 0%;
     
353.         flex-direction: row;
     
354.         justify-content: center;
     
355.         align-items: center;
     
356. }
     
357. .input_diss_bg1 {
     
358.         width: 100%;
     
359.         height: 90px;
     
360.         /* background-color: rgb(196, 47, 47); */
     
361.         position: absolute;
     
362.         bottom: 0%;
     
363.         flex-direction: row;
     
364.         justify-content: center;
     
365.         align-items: center;
     
366. }
     
367. .input_diss {
     
368.         background-color: #444444;
     
369.         border-radius: 7px;
     
370.         box-sizing: border-box;
     
371.         position: absolute;
     
372.         width: 80%;
     
373.         height: 50px;
     
374.         z-index: 888;
     
375.         /*去边框*/
     
376.         border: 0;
     
377.         color: cornsilk;
     
378. }
     
379. .input::-webkit-outer-spin-button,
     
380. .input::-webkit-inner-spin-button {
     
381.         -webkit-appearance: none !important;
     
382.         margin: 0;
     
383. }
     
384. .input_diss_img {
     
385.         z-index: 999;
     
386.         width: 30px;
     
387.         height: 30px;
     
388.         position: absolute;
     
389.         right: 11%;
     
390. }
     
391. .main {
     
392.         width: 100%;
     
393.         position: absolute;
     
394.         height: 24rem;
     
395.         top: 5.5rem;
     
396. }
     
397. .cell {
     
398.         /* padding: 8px; */
     
399.         /* height: 4rem; */
     
400.         border-bottom: 0.5px solid #ddd;
     
401.         /* background-color: rgb(160, 19, 19); */
     
402.         flex-direction: column;
     
403.         /* justify-content: flex-start; */
     
404.         align-items: space-around;
     
405. }
     
406. 
     
407. .cell1 {
     
408.         flex-direction: row;
     
409.         justify-content: space-around;
     
410.         align-items: flex-start;
     
411.         padding: 8px;
     
412.         /* height: 4rem; */
     
413. }
     
414. 
     
415. .cell2 {
     
416.         flex-direction: row;
     
417.         justify-content: space-around;
     
418.         align-items: flex-start;
     
419.         padding-left: 5rem;
     
420. }
     
421. .listView_text {
     
422.         flex-direction: column;
     
423.         align-items: center;
     
424.         text-align: left;
     
425.         /* height: 4rem; */
     
426.         width: 16rem;
     
427.         /* background-color: rgb(25, 180, 128); */
     
428.         margin-left: 1rem;
     
429.         /* height: 60px; */
     
430. }
     
431. .listView_text1 {
     
432.         font-size: 1rem;
     
433.         color: #898a8f;
     
434. }
     
435. .listView_text2 {
     
436.         font-size: 1rem;
     
437.         color: #b0bcbe;
     
438. }
     
439. /* .cell:active {
     
440.         background-color: #ddd;
     
441. } */
     
442. .title {
     
443.         /* font-weight: bold; */
     
444.         /* font-size: 0.8rem; */
     
445.         /* color: #000; */
     
446.         /* margin-right: 1rem; */
     
447.         width: 5rem;
     
448.         /* height: 4rem; */
     
449.         text-align: center;
     
450.         font-size: 1rem;
     
451.         color: #898a8f;
     
452.         /* background-color: rgb(19, 170, 64); */
     
453. }
     
454. .subtitle {
     
455.         color: #333;
     
456. }
     
457. .footer {
     
458.         justify-content: center;
     
459.         align-items: center;
     
460. }
     
461. </style>
     

复制代码

技术咨询-特特 · 2022-6-25 11:45发一下能复现你问题的简化版代码，

BIP57792

        <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
                                <cell class="cell" onclick={this.itemClick}>
                                        <view class="cell1">
                                                <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />

                                                <view class="listView_text">
                                                        <text class="listView_text1"> Philip Schultz </text>
                                                        <text class="listView_text2"> 说明这是一款注定要火的游戏 </text>
                                                        <view class="listView_text_more" @click="itemClickmore">
                                                                <text> 更多</text>
                                                                <image class="diss_list_lun_bg2_img" src="../../image/person/Groupxuan.png" />
                                                        </view>
                                                </view>
                                                <text class="title">{item.title}</text>

                                        </view>

                                        <view v-for="(itemlun,index) in item.pinlun" :data-index="index" class="cell2">
                                                <image class="diss_list_lun_bg2_img1" src="../../image/collect/ic_headIcon.png" />
                                                <view class="listView_text">
                                                        <text class="listView_text1"> Philip Schultz </text>
                                                        <text class="listView_text2"> {itemlun.desc} </text>
                                                </view>
                                                <text class="title">{itemlun.diss_title}</text>

                                        </view>


                                        <!-- <view v-if="item.pinlun" :data-index="index" class="cell2">
                                                <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
                                                <view class="listView_text">
                                                        <text class="listView_text1"> Philip Schultz </text>
                                                        <text class="listView_text2"> {item.pinlun.desc} </text>
                                                </view>
                                                <text class="title">{item.pinlun.diss_title}</text>

                                        </view> -->

                                </cell>

                        </list-view>

技术咨询-特特 · 2022-6-25 11:45发一下能复现你问题的简化版代码，

BIP57792

数据


        dataList: [{
                                title: '项目1',
                                desc: "说明这是一款注定要火的游戏",
                                diss: true,
                                pinlun: [
                                        {
                                                diss_title: '评论1',
                                                desc: "说明这是一款注定要火的游戏",
                                        },
                                        {
                                                diss_title: '评论2',
                                                desc: "说明这是一款注定要火的游戏",
                                        },
                                        {
                                                diss_title: '评论3',
                                                desc: "说明这是一款注定要火的游戏",
                                        },


                                ]
                        },
                        {
                                title: '项目2',
                                desc: "说明这是一款注定要火的游戏",
                                diss: false,
                                pinlun: []

                        },
                        {
                                title: '项目3',
                                desc: "说明这是一款注定要火的游戏",
                                diss: false,
                                pinlun: []

                        },
                        ]

BIP57792 · 2022-6-25 11:56Philip Schultz
                                                         说明这是一款注定要火的游戏
                                                       

BIP57792

点击事件

                itemClickmore(e) {

                        var that = this;
                        var listView = document.getElementById('listView');

                        var id = e.currentTarget.index;
                        this.dataList[id].diss = !this.dataList[id].diss;
                        if (!this.dataList[id].diss) {
                                this.dataList[id].pinlun = [];
                        } else {
                                var pinlin = [{
                                        diss_title: '评论5',
                                        desc: "说明这是一款注定要火的游戏",
                                },
                                {
                                        diss_title: '评论6',
                                        desc: "说明这是一款注定要火的游戏",
                                },
                                {
                                        diss_title: '评论7',
                                        desc: "说明这是一款注定要火的游戏",
                                },

                                ];
                                this.dataList[id].pinlun = pinlin;
                        }
                        var datalist1 = this.dataList[id];

          

                        try {
                                // listView.load({
                                //         data: datalist1
                                // });

                                listView.update({
                                        item: datalist1,
                                        index: id
                                }, function (ret) {
                                        console.log("error------" + ret);

                                })

                        } catch (error) {
                                console.log("error" + error);

                        }

                },

BIP57792 · 2022-6-25 11:57数据

BIP57792

用load 方法就么啥问题，可以绘制出来而且不报错

技术咨询-F

item: datalist1,

数据需要是数组类型

BIP57792

我这是个数组对象，不能用吗，只能是数组吗

技术咨询-F · 2022-6-26 09:29item: datalist1,

数据需要是数组类型

技术咨询-F

是的

BIP57792 · 2022-6-27 09:50我这是个数组对象，不能用吗，只能是数组吗