微信小程序开发1-点击事件,获取元素id

本人也是刚接触小程序开发，总之碰到了很多坑.在后续的的实践中我会一点一点地把自己遇到的问题与解决方案记录下来，希望能给大家带来帮助.

言归正传，进入主题

    今天要介绍的是小程序开发中常见的一种情况——点击列表中的某一行跳转到新的页面并将该行的详细信息显示出来

    话不多说先上代码：

xxx.wxml中的代码-里面的样式用的是有赞提供的开源样式库,感兴趣的可以去了解一下

<view class="container">



<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:400px;"

class="list" bindscrolltolower="scrolltolower" bindscroll="scroll" bindscrolltoupper="scrolltoupper">

<block wx:for="{{user_key}}" wx:for-item="itemName" wx:key="key" >



<view class="zan-panel" catchtap='userinfo' id='{{itemName.u_id}}' >

<view class="zan-card">

<view class="zan-card__thumb">

<image class="zan-card__img"

src="../../images/1.png"

mode="aspectFit" style="height: 80rpx;width: 80rpx;"></image>

</view>

<view class="zan-card__detail">

<view class="zan-card__detail-row">

<view class="zan-card__right-col">

<view class='zan-icon' ><text> {{itemName.real_name}}</text></view>

</view>

<view class="zan-card__left-col">

<text> {{itemName.name}} </text>

</view>

</view>

<view class="zan-card__detail-row zan-c-gray-darker">

<view class="zan-card__right-col"><text> {{ itemName.reg_date }} </text></view>

<view class="zan-card__left-col">

<text wx:if="{{itemName.group_id == 0}}" class="zan-card__right-col zan-c-red" >暂未开通</text>

<text wx:elif="{{itemName.group_id == 1}}" class="zan-card__right-col zan-c-red" >分公司</text>

<text wx:elif="{{itemName.group_id == 2}}" class="zan-card__right-col zan-c-red" >第一车队</text>

<text wx:elif="{{itemName.group_id == 3}}" class="zan-card__right-col zan-c-green" >第二车队</text>

<text wx:elif="{{itemName.group_id == 4}}" class="zan-card__right-col zan-c-orange" >第三车队</text>

<text wx:elif="{{itemName.group_id == 5}}" class="zan-card__right-col zan-c-green" >第四车队</text>

</view>

</view>

</view>

</view>

</view>

</block>

<view class="doc-title zan-hairline--bottom"><view class='tips'> 没有更多</view></view>

</scroll-view>

<view class="body-view">

<loading hidden="{{true}}" bindchange="loadingChange">

<text style='font-size: 28rpx;color: #2b2b2b;'>加载更多...</text>.

</loading>

</view>

</view>

xxx.js中的有关代码代码

//当点击用户详情的时候,直接把当前的u_id传到下个页面

userinfo: function (e) {

    // console.log(e.currentTarget.id)

    var uId = e.currentTarget.id

// console.log(uId)

wx.navigateTo({

url: "userinfo/userinfo?u_id="+uId,

})

}

运行的结果

我之前传递的数据

代码解读————有些基础的部分请大家先提前了解一下,这里我们直接介绍关键代码

在xxx.wxml中我用绿色的背景标记了,

    catchtop中绑定的事件userinfo函数中的参数e中携带了id的数据,而这个数据在前面的id='{{itemName.u_id}}'

，属性中定义了这里在原文中用紫色备件标注了

    这个例子在很多场景都有用到过————这里我把我的Demo截了图,以便大家更好的理解

这次的分享就到这里希望能给大家带来帮助