首頁一如既往的先上效果圖：

? ? ?

上代碼：

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>

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

/*** 頁面的初始數(shù)據(jù)*/data: {activeIndex: 0, //默認選中第一個numArray: [20, 30, 50, 80, 100,'m']},activethis: function (event) { //點擊選中事件var thisindex = event.currentTarget.dataset.thisindex; //當前indexthis.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; }

?

總結

以上是生活随笔為你收集整理的微信小程序实现充值，自定义金额充值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。