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

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

上代码：

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; //当前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;
}

微信小程序实现充值，自定义金额充值相关推荐

微信小程序之callout自定义气泡
最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性 callout呢,是在标记的点上面显示一个气泡,作为提示用最后展示下效果 ...
微信小程序用vant自定义tabbar页面并跳转相应页面
0.前置安装步骤一安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用步骤二修改 app.json 将 app.json 中 ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
微信小程序scroll-view实现自定义刷新
微信小程序scroll-view实现自定义刷新@TOC 先说原生页面级的刷新通常我们可以利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上 ...
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...
微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
【微信小程序】使用自定义字体
微信小程序使用自定义字体文章目录微信小程序使用自定义字体 1. 微信小程序默认支持的字体 2. 自定义字体获取 3. 文字提取和字体ttf文件压缩 4. 字体转Base64格式 5. 字体应用到小 ...
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...
微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...

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

微信小程序实现充值，自定义金额充值相关推荐

最新文章

热门文章