微信小程序实现充值，自定义金额充值

首页一如既往的先上效果图：

     

上代码：

WXML----------------------------------------------------------

  
    钱包余额
    0.00
  



  充值金额




  
    
      ￥{
    {item}}
      自定义金额
      
    
  



  
    立即充值
  

JS----------------------------------------------------------

  /**
   * 页面的初始数据
   */
  data: {
    activeIndex: 0, //默认选中第一个
    numArray: [20, 30, 50, 80, 100,'m']
  },
  activethis: function (event) { //点击选中事件
    var thisindex = event.currentTarget.dataset.thisindex; //当前index
    this.setData({
      activeIndex: thisindex
    })
  }

wxss---------------------------------------------------

.active {
  background-color: #6d97f8;
  border: 2px solid #6d97f8;
  color: white;
}

.noactive {
  background-color: white;
  border: 2px solid white;
  color: black;
}

.btnView {
  width: 100%;
  height: 300rpx;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
}

.btnView view {
  width: 210rpx;
  height: 100rpx;
  margin: 10rpx;
  border-radius: 10rpx;
}

.otherText {
  /* color: black; */
  font-size: 38rpx;
  font-weight: 600;
}

.inputView {
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 38rpx;
  color: white;
}

.zidyText {
  font-size: 30rpx;
  font-weight: 600;
}

.bgView {
  background-image: linear-gradient(0deg, #6d97f8, #5cb3f3);
  height: 150rpx;
  width: 100%;
  margin-bottom: 30rpx;
}
.titleBox{
  text-align: center;
}
.title {
  color: white;
  font-size: 28rpx;
}
.titleView{
  margin-bottom: 20rpx;
}

.num{
  color: white;
  font-size: 40rpx;
  font-weight: 600;
}

.czhiView{
  width: 100%;
  height: 100rpx;
  background-color: white;
  padding: 0rpx 30rpx;
  margin-bottom: 10rpx;
}

.czhiView text{
  font-size: 28rpx;
}
.czhiBox{
  width: 100%;
}
.btnczhi{
  width: 94%;
  background-image: linear-gradient(45deg, #6d97f8, #5cb3f3);
  height: 80rpx;
  border-radius: 10rpx;
}
.btnczhi text{
  color: white;
  font-size: 32rpx;
}