微信小程序开发笔记基础篇③——自定义数据dataset，事件触发携带额外信息

原创已于 2023-02-14 11:41:35 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序 #dataset #自定义数据

于 2023-01-08 22:53:09 首次发布

该文章介绍了如何使用微信小程序开发一个电费充值界面，通过在不同金额的充值按钮上设置dataset属性，传递自定义数据（如金额）。当用户点击按钮时，事件回调函数能获取到点击的按钮所携带的数据，从而实现动态更新界面并展示所选金额。示例代码包括了页面结构、事件处理和数据绑定的过程。

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

一、前言

微信小程序开发笔记——导读

想要实现一个电费充值界面。
多个不同金额的充值按钮，每个按钮都携带自定义数据（金额）
点击不同金额的充值按钮，就会上传对应的数据（金额）。
所以，本文主要使用到了微信小程序框架的视图层的事件系统的事件对象的dataset

二、视频演示

微信小程序充值界面简单演示

三、原理和流程

在对应的组件控件上面添加dataset属性

<view bindtap="rechargePriceClick" data-totalfee="10">
    <text style="font-size: 40rpx;">10</text>
    <text style="font-size: 26rpx;"> 元</text>
</view>

那么它的点击事件回调函数里面就会回传这个属性

  rechargePriceClick(e){
      console.log(e)
  },

日志打印与验证

四、注意事项

在这里插入图片描述

验证

<view bindtap="rechargePriceClick" data-aUser="10" data-b-user="10">
    <text style="font-size: 40rpx;">10</text>
    <text style="font-size: 26rpx;"> 元</text>
</view>

在这里插入图片描述

五、全部源码

recharge.js

Page({
  data: {
    totalFee: 0,
  },

  onLoad: function (e) {
    console.log("recharge onLoad")
  },

  rechargePriceClick(e){
      var _this = this
      console.log(e.currentTarget.dataset)
      this.setData({
        totalfee: e.currentTarget.dataset.totalfee
      })
      
    wx.showToast({
        title: "totalfee="+_this.data.totalfee,
        icon: 'none',
        duration: 1000
    })
  },

  rechargeClick(e) {
    var _this = this
    console.log("rechargeClick", this.data)  
    wx.showToast({
        title: "totalfee="+_this.data.totalfee,
        icon: 'none',
        duration: 1000
    }) 
  },
})

recharge.json

{
  "navigationBarTitleText": "电费充值",
  "usingComponents": {}
}

recharge.wxml

<view class="container">
    <view style="margin-top: 20rpx; margin-left: 50rpx; margin-right: 50rpx; align-items: center; display: flex; align-items: center; font-size: 40rpx;">
        <view class="button_frame {{totalfee=='10'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="10">
            <text style="font-size: 40rpx;">10</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='20'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="20">
            <text style="font-size: 40rpx;">20</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='50'?'button_select':'button_unselect'}}" bindtap="rechargePriceClick" data-totalfee="50">
            <text style="font-size: 40rpx;">50</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
    </view>
    <view style="margin-top: 20rpx; margin-left: 50rpx; margin-right: 50rpx; align-items: center; display: flex; align-items: center; font-size: 40rpx;">
        <view class="button_frame {{totalfee=='100'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="100">
            <text style="font-size: 40rpx;">100</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='200'?'button_select':'button_unselect'}}" style="margin-right: 30rpx;" bindtap="rechargePriceClick" data-totalfee="200">
            <text style="font-size: 40rpx;">200</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
        <view class="button_frame {{totalfee=='500'?'button_select':'button_unselect'}}" bindtap="rechargePriceClick" data-totalfee="500">
            <text style="font-size: 40rpx;">500</text>
            <text style="font-size: 26rpx;"> 元</text>
        </view>
    </view>
    <view class="btnBox btnBox_electricBg" bindtap="rechargeClick">立即充值</view>
</view>

recharge.wxss

.button_frame {
    width: 200rpx; 
    padding-top: 40rpx; 
    padding-bottom: 40rpx; 
    padding-right: 40rpx; 
    padding-left: 40rpx; 
    border-radius: 10rpx; 
    text-align: center;
}

.button_select {
    color: #ffffff;
    background-color: #58d4dc;
}

.button_unselect {
    color: black; 
    background-color: gainsboro;
}