list-view里回滚样式渲染变化

sohigh

代码

1. <cell class="cell" onclick={this.itemClick}>       
   
2.                                 <view class={item.imagesCount==1?'cellrow':'cellcol'}>
   
3.                                         <view class={item.imagesCount==1?'cellrowtext':'cellcoltext'}>
   
4.                                                 <view><text class="title">{item.title}</text></view>
   
5.                                                 <view class={item.imagesCount==1?'displaynone':'sourceboxl'}>
   
6.                                                         <text class="source">{item.source}</text>
   
7.                                                         <text class="addtime">{item.addtime}</text>
   
8.                                                 </view>
   
9.                                         </view>                               
   
10.                                         <view class={item.imagesCount==1?'cellrowimages':'cellcolimages'}>
    
11.                                                 <image class={item.imagesCount==1?'displaynone':'cellcolimage'} src={item.image} mode="center"></image>
    
12.                                                 <image class={item.imagesCount==1?'cellrowimage':'displaynone'} src={item.image1} mode="center"></image>
    
13.                                                 <image class={item.imagesCount==1?'cellrowimage':'displaynone'} src={item.image2} mode="center"></image>
    
14.                                                 <image class={item.imagesCount==1?'cellrowimage':'displaynone'} src={item.image3} mode="center"></image>
    
15.                                         </view>
    
16.                                         <view class={item.imagesCount==1?'sourceboxb':'displaynone'}>
    
17.                                                 <text class="source">{item.source}</text>
    
18.                                                 <text class="addtime">{item.addtime}</text>
    
19.                                         </view>
    
20.                                 </view>                               
    
21.                         </cell>

复制代码

往下滚的时候正常显示，
回滚的时候，
<view class={item.imagesCount==1?'cellrowimages':'cellcolimages'}>
                        <image class={item.imagesCount==1?'displaynone':'cellcolimage'} src={item.image} mode="center"></image>
                        <image class={item.imagesCount==1?'cellrowimage':'displaynone'} src={item.image1} mode="center"></image>
                        <image class={item.imagesCount==1?'cellrowimage':'displaynone'} src={item.image2} mode="center"></image>
                        <image class={item.imagesCount==1?'cellrowimage':'displaynone'} src={item.image3} mode="center"></image>
                    </view>




全不见了

sohigh

改了下代码，现在好多了

1. <cell class="cell" onclick={this.itemClick}>       
   
2.                                 <view class={item.imagesCount==1?'cellrow':'displaynone'}>
   
3.                                         <view class="cellrowtext">
   
4.                                                 <view><text class="title">{item.title}</text></view>
   
5.                                         </view>
   
6.                                         <view class="cellrowimages">
   
7.                                                 <image class="cellrowimage" src={item.image1} mode="center" placeholder="../../image/loading.gif"></image>
   
8.                                                 <image class="cellrowimage" src={item.image2} mode="center" placeholder="../../image/loading.gif"></image>
   
9.                                                 <image class="cellrowimage" src={item.image3} mode="center" placeholder="../../image/loading.gif"></image>
   
10.                                         </view>
    
11.                                         <view class="sourceboxb">
    
12.                                                 <text class="source">{item.source}</text>
    
13.                                                 <text class="addtime">{item.addtime}</text>
    
14.                                         </view>
    
15.                                 </view>
    
16.                                 <view class={item.imagesCount==1?'displaynone':'cellcol'}>
    
17.                                         <view class="cellcoltext">
    
18.                                                 <view><text class="title">{item.title}</text></view>
    
19.                                                 <view class="sourceboxl">
    
20.                                                         <text class="source">{item.source}</text>
    
21.                                                         <text class="addtime">{item.addtime}</text>
    
22.                                                 </view>
    
23.                                         </view>                               
    
24.                                         <view class="cellcolimages">
    
25.                                                 <image class="cellcolimage" src={item.image} mode="center" placeholder="../../image/loading.gif"></image>
    
26.                                         </view>
    
27.                                 </view>               
    
28.                         </cell>

复制代码

sohigh

list-view 组件可使用 scroll-view 的所有属性，同时支持以下属性：

属性名称        类型        默认值        必填        说明
cell-type-key        string                否        用于从列表项数据中获取 cell-type 值的 key，以决定该项使用哪一类型的 cell 来显示。

这个属性如何使用，我在论坛里没搜到，也许用这个可以

技术咨询-Kenny

sohigh 发表于 2021-8-30 10:08
list-view 组件可使用 scroll-view 的所有属性，同时支持以下属性：

属性名称        类型        默认值        必填        说明

可以参考avm的一些示例，https://**.**/apicloudcom/avm-simple/blob/master/文字聊天列表/widget/pages/detail/detail.stml

sohigh

技术咨询-Kenny 发表于 2021-8-30 18:54
可以参考avm的一些示例，https://**.**/apicloudcom/avm-simple/blob/master/文字聊天列表/widget/pa ...

这个可以，给版主点赞。
还有个问题，cell上如果放点击事件，官方的例子都只输出了一个序号。
实际应用中，cell上能否绑定文章的id，点击的时候获取这个id呢

技术咨询-Kenny

sohigh 发表于 2021-8-31 22:03
这个可以，给版主点赞。
还有个问题，cell上如果放点击事件，官方的例子都只输出了一个序号。
实际应用中 ...

<cell data-id={item.id} onclick="onclick">

onclidk(e){
    let id = e.currentTarget.dataset.id;
}