微信小程序笔记(一)——点击显示或隐藏某一行数据

最新推荐文章于 2024-04-20 18:05:51 发布

原创

最新推荐文章于 2024-04-20 18:05:51 发布 · 1.6w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #显示 #隐藏

这篇博客介绍了如何在微信小程序中通过点击事件来实现某一行数据的显示与隐藏，涉及`index.wxml`的结构定义，`index.wxss`的样式控制以及`index.js`中的逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击后隐藏或显示某一行数据。在小程序开发时，经常需要实现在点击完列表中的某一行数据后，就能展开其对应的相关内容或隐藏其对应的内容

index.wxml


  
  
   
   
    
    <
    
    view 
    
    class=
    
    'text'>
   
   
   
     
    
    <
    
    text
    
    >方法一
    
    </
    
    text
    
    >
   
   
   
   
    
    </
    
    view
    
    >
   
   
   
   
    
    <
    
    view 
    
    wx:for=
    
    "{
     
     {list}}" 
    
    wx:key=
    
    "content" 
    
    wx:for-index=
    
    "key">
   
   
   
     
    
    <
    
    view 
    
    class=
    
    'title' 
    
    data-index=
    
    '{
     
     {key}}' 
    
    bindtap=
    
    'hiddenBtn'>
   
   
   
       
    
    <
    
    label
    
    >aaa {
    
    {item.id+1}}
    
    </
    
    label
    
    >
   
   
   
     
    
    </
    
    view
    
    >
   
   
   
     
    
    <
    
    view 
    
    hidden=
    
    '{
     
     {item.hidden}}'>
   
   
   
       
    
    <
    
    view 
    
    class=
    
    'line'></
    
    view
    
    >