微信小程序点击获取页面循环列表的数据

最新推荐文章于 2025-05-26 10:12:10 发布

原创最新推荐文章于 2025-05-26 10:12:10 发布 · 1.2w 阅读

18 ·

CC 4.0 BY-SA版权

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

3 篇文章

订阅专栏

本文介绍了在微信小程序中，如何在wx:for循环列表中为每个元素添加data-*属性，并通过点击事件获取这些属性值，以实现在不同图片点击后跳转到相应页面的功能。

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

最近接触了小程序，和以前的一些js的框架不一样的是，当页面绑定一个方法时，这里不会带参数，如下所示：

<view class="page">
    <view class="page__bd">
        <view class="weui-grids">
            <block wx:for="{{list}}">
                <navigator wx:if="{{item.parentId!=1}}" class="weui-grid" hover-class="weui-grid_active" 
                url="" bindtap='navigateToPage' id='{{item.id}}' data-name='{{item.name}}' data-showType='{{item.showType}}'>
                    <image class="weui-grid__icon" src="{{url}}{{item.image}}" />
                    <view class="weui-grid__label">{{item.name}}</view>
                </navigator> 
            </block>
        </view>
    </view>
</view>

这里使用了一个for循环：wx:for循环一个列表，绑定了一个方法叫navigateToPage，展示为九宫格的形式：

这里使用<navigator url=""><navigator>的形式，本来如果这些图片都是跳转到一个页面的话，只要url的参数不一致就可以了。

但是这里需要判断每张图片的类型，从而点击之后跳转到不一样的界面，需要在navigateToPage方法中取到每张图片的名称和类型值，这时候需要给每一项设置一个data-**属性，星号部分自定义名称即可：
我这里需要元素的坐标 data-name='{{item.name}}' data-showType='{{item.showType}}'
这样在点击的时候就可以通过获取 e.currentTarget.dataset.name 来获取到name的值了
代码如下：

 navigateToPage:function(e){
    var id = e.currentTarget.id
    var name = e.currentTarget.dataset.name
    var showType = e.currentTarget.dataset.showtype
    console.log(showType)
    if (showType=='1'){
      wx.navigateTo({
        url: '../userForm/userForm?id='+id+'&name='+name ,
      }) 
    }
    else if (showType == 'pass'){
      wx.navigateTo({
        url: '../userPass/userPass',
      })
    }else{
      wx.navigateTo({
        url: '../userList/userList?id=' + id + '&name=' + name+'&showType='+showType,
      })
    }
  },