微信小程序充值页面

weixin_44291886

已于 2022-02-22 13:49:44 修改

阅读量4.8k

点赞数 1

文章标签：微信小程序 javascript css

于 2021-06-18 16:09:35 首次发布

本文链接：https://blog.csdn.net/weixin_44291886/article/details/118027979

版权

本文展示了如何制作微信小程序的充值页面，包括WXML结构、JS逻辑以及如何通过判断选择的充值选项来实现交互效果。

摘要由CSDN通过智能技术生成

最近做了充值的页面如下图所示

在这里插入图片描述里面选择的做法
wxml:

// class用到了三元运算符来判断当点击的时候改变被点击金额框的样式
<view class="rechargelist">
   <view wx:for="{
   {rechargelist}}" class="item {
   {index == Select ? active: ''}}"  bindtap="recharge" data-id="{
   {index}}"  wx:key="index">￥{
   {
   item.sum}}</view>
</view>

js:

// class用到了三元运算符来判断当点击的时候改变被点击金额框的样式
page({
   
	data:{
   
		rechargelist:[{
   id:0,sum:'20'},{
   id:1,sum:'40'},{
   id:2,sum:'60'},{
   id:3,sum:'100'},{
   id:4,sum:'200'},{
   id:5,sum:'500'}],
		select:''
	}
	// 充值金额
  recharge(e) {
   
    for(var i=0;i<this.data.rechargelist.length;i++){
   
      if (e.currentTarget.dataset.id == this.data.rechargelist[i].id) {
   
        this.setData({
   
          Select:e.currentTarget.dataset.id,