微信小程序账户充值页面

下面介绍一下充值页面前端设计的 js 实现(点击选项高亮)

小框框的 css 设计我就不再多说，挺容易的，下面给出代码：

<view class='pay'>
<view class='money_charge'>
<button class='{{un_click1}}' bindtap='lv1'>10元</button>
<button class='{{un_click2}}' bindtap='lv2'>30元</button>
<button class='{{un_click3}}'bindtap='lv3'>50元</button>
</view>
<view class='money_charge'>
<button class='{{un_click4}}' bindtap='lv4'>100元</button>
<button class='{{un_click5}}' bindtap='lv5'>300元</button>
<button class='{{un_click6}}'  bindtap='lv6'>500元</button>
</view>

首先，是 bindtap 是最基本的事件绑定，下面给出微信官方文档：

事件的使用方式
在组件中绑定一个事件处理函数。
如 bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

用户点击不同金额的button 的时候就会调用对应的函数
下面来看看对应js代码：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    un_click1:'money_box',
    un_click2: 'money_box',
    un_click3: 'money_box',
    un_click4: 'money_box',
    un_click5: 'money_box',
    un_click6: 'money_box'
  },
  lv1:function(){
      this.setData({
        un_click2: 'money_box',
        un_click3: 'money_box',
        un_click4: 'money_box',
        un_click5: 'money_box',
        un_click6: 'money_box',
        un_click1:'money_box1'
      })
  },
  lv2: function () {
    this.setData({
      un_click2: 'money_box1',
      un_click3: 'money_box',
      un_click4: 'money_box',
      un_click5: 'money_box',
      un_click6: 'money_box',
      un_click1: 'money_box'
    })
  },
  lv3: function () {
    this.setData({
      un_click2: 'money_box',
      un_click3: 'money_box1',
      un_click4: 'money_box',
      un_click5: 'money_box',
      un_click6: 'money_box',
      un_click1: 'money_box'
    })
  },
  lv4: function () {
    this.setData({
      un_click2: 'money_box',
      un_click3: 'money_box',
      un_click4: 'money_box1',
      un_click5: 'money_box',
      un_click6: 'money_box',
      un_click1: 'money_box'
    })
  },
  lv5: function () {
    this.setData({
      un_click2: 'money_box',
      un_click3: 'money_box',
      un_click4: 'money_box',
      un_click5: 'money_box1',
      un_click6: 'money_box',
      un_click1: 'money_box'
    })
  },
  lv6: function () {
    this.setData({
      un_click2: 'money_box',
      un_click3: 'money_box',
      un_click4: 'money_box',
      un_click5: 'money_box',
      un_click6: 'money_box1',
      un_click1: 'money_box'
    })
  },
  
})

这里涉及到微信小程序特有的data (数据)
虽然微信小程序类似于网页开发，但是它不能对 DOM 进行操作，取而代之的是data，也就是数据绑定，通过对data 里的数据进行操作来代替对 DOM 的操作！

再回到例子，各个button 原来的class 属性分别是 un_clickN (N，为第N个button)
money_box 是我定义的未点击时的button样式，然后通过bindtap 调用对应的 lvN (N,同上)　来对data 进行修改，具体则是使用this.setData()的方法:

this.setData({
     un_click2: 'money_box',
      un_click3: 'money_box',
      un_click4: 'money_box',
      un_click5: 'money_box',
      un_click6: 'money_box1',
      un_click1: 'money_box'
    })

把点击的button (也就是this) 的class 属性修改称为 money_box1 ，也就是我定义的高亮显示的样式，这样就实现了点击选项的高亮显示 ~~

这里额外再啰嗦一点东西：

<button class='{{un_click1}}' bindtap='lv1'>10元</button>

这个双花括号意思就是引用data 数据
un_click1: ‘money_box’
这里这个数据是字符串类型的，但是你不能这样

<button class={{un_click1}} bindtap='lv1'>10元</button>

把 class 的引号给拿掉，这个是 class 的语法问题————外面就得用引号框着，然后里面是字符串 ，老铁 没毛病 ~~

最后附上对应css 代码：

.pay
{
  background-color: rgba(128, 128, 128, 0.075);
  padding-top: 40rpx;
  height: 1500rpx;
}
.b_head
{
  text-align: center;
  margin-bottom: 20rpx;
}
.money_charge
{
  background-color: white;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.money_box
{
  height: 130rpx;
  width: 200rpx;
  border-radius: 8%;
  text-align: center;
  line-height: 130rpx;
  margin-top: 20rpx;
  border: 1rpx grey solid;
  color: grey;
  background-color: white;
  margin-bottom: 20rpx;
}
.money_box1
{
  border: 1rpx rgb(11, 235, 11) solid;
  color:rgb(11, 235, 11);
  height: 130rpx;
  width: 200rpx;
  border-radius: 8%;
  text-align: center;
  line-height: 130rpx;
  background-color: white;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}