list-view 如何更改动态改样式

测试123yun

list-view 中的cell操作
想点击图标后 更换图片 请问如何再点击后 更改src属性

测试123yun

点击后，通过三元运算符判断和index对比，但是不生效

1. <view class="handle-box borderright" data-audio={item.audiopath} onclick={this.play}>
   
2.                                                         <image src="../../image/ic_grey.png" class={currentplay==index?'hide':'handle-icon'}></image>
   
3.                                                         <image src="../../image/ic03.png" class={currentplay==index?'handle-icon':'hide'}></image>
   
4.                                                 </view>

复制代码

点击后设置currenplay的值，但是不管用

技术咨询-F

发一个页面代码，我这里运行看看

测试123yun

技术支持-F 发表于 2021-7-28 21:57
发一个页面代码，我这里运行看看

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

复制代码

测试123yun

功能是点击后，隐藏7777，但是没有实现效果

技术咨询-F

测试123yun 发表于 2021-7-29 17:58

目前 cell里面只能访问数据源item里面的，要把所有判断数据放item里面。

sxgsw3

《教育培训》云应用前后端全部免费开源啦！【新源码】
https://community.apicloud.com/bbs/thread-170438-1-1.html

前后端源码开源，可以让你快速了解AVM开发。