首页一如既往的先上效果图:
上代码:
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----------------------------------------------------------
/**
* 页面的初始数据
*/
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;
}