微信小程序 --- e.currentTarget.dataset.id 获取不到值

直接代码

wxml代码片段

<view class='ranksList' wx:for="{{ranksLb}}">
      <view class='ranksListName'><image src='../image/icon-21.png'></image><text>{{item.name}}</text></view>
      <view class='ranksListNum'><label>下级:</label><text bindtap='tosubordinate' data-workerId='{{item.id}}'>{{item.subordinateNum}}-{{item.id}}</text></view>
      <view class='ranksListIphone'><image src='../image/icon-22.png'></image><text>{{item.mobile}}</text></view>
    </view> 

js代码片段

//事件处理函数
  tosubordinate: function (e) {
    var workerId = e.currentTarget.dataset.workerId;
    console.log("workerId------" + workerId);
    wx.navigateTo({
      url: '../subordinate/subordinate?workerId=' + workerId
    })
  },

结果 workerId undefined。

OK,重点便在这里。在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。
这里写图片描述
看代码可知,这里是自定义了一个名字为id的dataset,因此在事件函数中,我们可以通过e.currentTarget.dataset.id访问到绑定到该组件的自定义数据。

修改:

//事件处理函数
  tosubordinate: function (e) {
    var workerId = e.currentTarget.dataset.workerid;
    console.log("workerId------" + workerId);
    wx.navigateTo({
      url: '../subordinate/subordinate?workerId=' + workerId
    })
  },

主要修改了 e.currentTarget.dataset.workerid.

workerId –> workerid 解决。

### 微信小程序 `scroll-view` 组件使用教程 #### 一、基本属性介绍 `scroll-view` 是微信小程序中的一个容器组件,用于创建可滚动区域。此组件支持水平和垂直方向上的滚动,并提供多种配置选项来增强用户体验。 - **`scroll-x`**: 设置为 true 可启用横向滚动功能;默认情况下不开启[^1]。 - **`scroll-y`**: 同样地设置为 true 则允许纵向滚动;同样,默认状态下是禁用的。 - **`upper-threshold` 和 `lower-threshold`**: 定义当滚动条接近顶部或底部边缘多少距离时触发相应的事件回调函数(即上拉加载更多/下拉刷新)。单位为 px。 - **`bindscrolltoupper` / `bindscrolltolower`**: 当达到设定阈时会调用对应的绑定方法执行特定逻辑操作,比如加载新数据等。 - **`throttle`**: 控制是否应用防抖机制,默认为 true。对于某些场景下的性能优化非常有用,但在特殊需求如精确控制位置的情况下可能需要将其设为 false 来避免因速度过快而导致的位置计算偏差问题。 ```html <scroll-view scroll-x="true" bindscroll="bindscroll" throttle="false"> <!-- 子元素 --> </scroll-view> ``` #### 二、高级特性展示 ##### 1. 滑动到指定视图 通过 `scroll-into-view` 属性可以轻松实现页面内跳转至某个具体节点的效果。只需给目标 `<view>` 赋予唯一的 ID 并赋给父级 `scroll-view` 的该参数即可完成定位[^2]。 ```html <!-- 假设有如下结构 --> <scroll-view id="scrollViewId" scroll-into-view="{{targetView}}"> ... <view id="specificTarget">这里是目的地</view> <!-- targetView 应为此处ID字符串 --> ... </scroll-view> ``` ##### 2. 结合导航栏切换内容区显示 利用循环渲染技术配合条件样式类名动态改变当前激活项的同时调整关联的内容面板可见状态,从而构建出类似于 tab 导航式的交互效果[^3]。 ```html <scroll-view scroll-x="true"> <block wx:for="{{navList}}" wx:key="index"> <view class='nav_item {{index === currentIndex ? "active" : ""}}' data-index="{{index}}" bindtap="handleNavClick" > {{item.text}} </view> </block> </scroll-view> <!-- 对应的内容部分省略... --> <script type="text/javascript"> Page({ handleNavClick(e){ const { index } = e.currentTarget.dataset; this.setData({ currentIndex }); } }) </script> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值