微信小程序开发1-点击事件,获取元素id
2018-04-01 08:50
901 查看
本人也是刚接触小程序开发,总之碰到了很多坑.在后续的的实践中我会一点一点地把自己遇到的问题与解决方案记录下来,希望能给大家带来帮助.
言归正传,进入主题
今天要介绍的是小程序开发中常见的一种情况——点击列表中的某一行跳转到新的页面并将该行的详细信息显示出来
话不多说先上代码:
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:
4000
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中的有关代码代码//当点击
91f7
用户详情的时候,直接把当前的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截了图,以便大家更好的理解
这次的分享就到这里希望能给大家带来帮助
言归正传,进入主题
今天要介绍的是小程序开发中常见的一种情况——点击列表中的某一行跳转到新的页面并将该行的详细信息显示出来
话不多说先上代码:
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:
4000
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中的有关代码代码//当点击
91f7
用户详情的时候,直接把当前的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截了图,以便大家更好的理解
这次的分享就到这里希望能给大家带来帮助
相关文章推荐
- 微信小程序开发-点击事件,获取元素id
- 微信小程序开发-点击事件,获取元素id,页面传值 & 获取js里的数据
- 微信小程序bindtap事件怎么获取当前点击标签?
- 微信小程序的点击元素跳转页面事件
- 微信小程序获取循环元素id以及wx.login登录操作
- 微信小程序开发之如何哪获取微信小程序的APP ID
- 微信开发遇坑事件---未来元素点击事件
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序支付中的prepay_id获取方法,以及微信支付统一签名算法闭坑
- 微信小程序开发常用技巧(4)——事件传递参数
- 微信移动应用接入开发, Android 授权微信登录获取openid,unionid等,score参数错误或者没有scope权限
- jquery点击事件获取该元素在整个一类元素中的索引值
- 点击鼠标获取元素ID
- 微信小程序 获取小程序码和二维码java接口开发
- 原创:微信小程序java实现AES解密并获取unionId
- 微信小程序获取不到unionid还有小程序无法解析JSON字符串的问题
- 微信小程序开发详解(五)---微信小程序事件
- 微信小程序 --- e.currentTarget.dataset.id 获取不到值
- 微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染 ...