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

最新推荐文章于 2026-05-03 09:27:44 发布

原创最新推荐文章于 2026-05-03 09:27:44 发布 · 1.6w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

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

微信小程序专栏收录该内容

1 篇文章

订阅专栏

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

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

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>
    <view class='content'>
      <label>bbb</label>
    </view>
  </view>
  <view class='line_bottom'></view>
</view>
<view class='text'>
  <text>方法二</text>
</view>
<view wx:for="{{listCon}}" wx:key="content" wx:for-index="key">
  <view class='title' data-index='{{key}}' bindtap='hiddenBtnCon'>
    <label>aaa {{item.id+1}}</label>
  </view>
  <view class='{{item.hidden == true? "hide":"show"}}'>
    <view class='line'></view>
    <view class='content'>
      <label>bbb</label>
    </view>
  </view>
  <view class='line_bottom'></view>
</view>

index.wxss

.text{
  background-color: #eee;
  padding: 5rpx;
}
/*标题  */
.title{
  padding: 15rpx;
}
/*内容  */
.content{
  padding: 25rpx 30rpx;
  background-color: #ddd
}
.line{
  border: 1rpx solid #eee;
}
.line_bottom{
  border: 8rpx solid #eee;
}
/*隐藏  */
.hide{
 display: none;
}
/*显示  */
.show{ 
 display: block;
}

index.js

  data: {
    list:[
      { 'id': 0, 'hidden': true },
      { 'id': 1, 'hidden': true },
      { 'id': 2, 'hidden': true },
    ],
    listCon: [
      { 'id': 0, 'hidden': true },
      { 'id': 1, 'hidden': true },
      { 'id': 2, 'hidden': true },
    ]
  },
  // 方法一
  hiddenBtn:function(e){
    var that = this;
    // 获取事件绑定的当前组件
    var index = e.currentTarget.dataset.index;
    // 获取list中hidden的值
    // 隐藏或显示内容
    that.data.list[index].hidden = !that.data.list[index].hidden;
    that.setData({
      list: that.data.list
    })
  },
  // 方法二
  hiddenBtnCon:function(e){
    var that = this;
    var index = e.currentTarget.dataset.index;
    that.data.listCon[index].hidden = !that.data.listCon[index].hidden;
    that.setData({
      listCon: that.data.listCon
    })
  },