微信小程序充值显示

首先展示一下效果图：

 

代码实现：

　　--wxml

　　 

<view class="bgView flexStandard">
  <view class="titleBox">
    <view class="titleView"><text class="title">钱包余额</text></view>
    <view><text class="num">0.00</text></view>
  </view>
</view>
 
<view class="czhiView flexVertical">
  <text>充值金额</text>
</view>
 
 
<view class="flexCenten">
  <view class="btnView">
    <view class="flexCenten {{activeIndex == index ? 'active':'noactive'}}" wx:for="{{numArray}}" wx:key="index"
      bindtap="activethis" data-thisindex="{{index}}">
      <text wx:if="{{item!='m'}}" class="otherText">￥{{item}}</text>
      <text wx:if="{{item=='m' && activeIndex != index}}" class="zidyText">自定义金额</text>
      <input wx:if="{{item=='m' && activeIndex == index}}" class="weui-input inputView" type="number"
        placeholder="请输入金额"></input>
    </view>
  </view>
</view>
 
<view class="czhiBox flexStandard">
  <view class="btnczhi flexCenten">
    <text>立即充值</text>
  </view>
</view>

--wxcs

 

.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;
}

--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
    })
  }

以上实现思路