E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

本人也是刚接触小程序开发,总之碰到了很多坑.在后续的的实践中我会一点一点地把自己遇到的问题与解决方案记录下来,希望能给大家带来帮助.言归正传,进入主题    今天要介绍的是小程序开发中常见的一种情况——点击列表中的某一行跳转到新的页面并将该行的详细信息显示出来    话不多说先上代码: xxx.wxml中的代码-里面的样式用的是有赞提供的开源样式库,感兴趣的可以去了解一下   <view class=”container”>  <!– 显示信息 外面套的scroll-view是用来做下拉刷新上拉加载的 –>  <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”  >        <!– <template is=”useritem” data=”{{itemName}}”/> –>          <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截了图,以便大家更好的理解这次的分享就到这里希望能给大家带来帮助微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发1点击事件,获取元素id
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏