小程序钱包页面

效果图

WXML代码

<!--index.wxml-->
<view class="container"><view class="qjt"><view class="upper" wx:for="{{list}}"><image src="{{item.icon}}"></image><text>{{item.text}}</text></view></view><navigator><view>生活服务</view></navigator><view class="mtd" wx:for="{{first}}" wx:for-item="group2"><view class="next" wx:for="{{group2}}" wx:for-item="row2"><image src="{{row2.icon2}}"></image><text>{{row2.text2}}</text></view></view>
</view>

WXSS代码

/**index.wxss**/
.container{height: 100vh;background-color: silver;display: flex;/* y轴为主轴 */flex-direction: column;
}
.qjt{height: 400rpx;display: flex;flex-direction: row;background-color: #686f78;
}
.upper{display: flex;flex-direction:column;align-items: center;height: 300rpx;color: white;
}
.upper image{width: 150rpx;height: 150rpx;margin: 35rpx 50rpx;
}
navigator{
border:silver solid 4rpx;
background-color: #fff;
height: 80rpx;
padding: 20rpx 10rpx 0 10rpx;
}
.mtd{width: 100%;display: flex;flex-direction:row;flex-wrap: wrap;
}
.next{display: flex;flex-direction: column;align-items: center;border: silver solid 2rpx;background-color: #fff;width: 33.333%;height: 260rpx;/* 盒子模型 */box-sizing: border-box;
}
.next image {width: 150rpx;height: 150rpx;
}
text{font-size: 35rpx;
}

JS代码

（icon里面的图片没有上传）

// index.js
Page({data: {list:[{icon:"/img/money.png",text:"收付款"},{icon:"/img/balance.png",text:"零钱"},{icon:"/img/cards.png",text:"银行卡"}],first:[[{icon2:"/img/cardRepay.png",text2:"信用卡还款"},{icon2:"/img/mobileTopup.png",text2:"手机充值"},{icon2:"/img/wealth.png",text2:"理财通"}],[{icon2:"/img/utilities.png",text2:"生活缴费"},{icon2:"/img/qqCoins.png",text2:"Q币充值"},{icon2:"/img/publicService.png",text2:"城市服务"}],[{icon2:"/img/cards.png",text2:"腾讯公益"},{icon2:"/img/charity.png",text2:"保险服务"}]]},
})

微信小程序钱包支付页面案例相关推荐

微信小程序个人中心页面案例
微信小程序开发,经常会遇到个人中心页面的需求,为了方便大家使用,决定将个人总想页面进行开源,以供大家参考交流. 一.效果预览二.源代码 abouthe.json文件 {"usingCo ...
微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...
【微信小程序】各种页面特效链接！
微信小程序:各种页面特效链接! 1.文字跑马灯效果: http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2.触摸水波涟漪效果: h ...
ios微信小程序虚拟支付解决办法
ios微信小程序虚拟支付整理介绍目前iOS端暂不支持虚拟支付,微信小程序虚拟支付仅涉及到ios端,安卓端不受影响. 小程序支付规范 https://developers.weixin.qq.com/ ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
微信小程序|上下滚动页面实现
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 案例描述微信小程 ...
微信小程序 iOS支付
微信小程序运营支付规范微信官方针对有虚拟支付功能的小程序下发了整改通知.截至5月8号,平台将对账号屏蔽iOS系统的支付接口调用.我去查了<<微信小程序运营规则>>,如上图.发 ...
微信小程序之支付密码输入demo
微信小程序之支付密码输入demo 原文链接:https://www.cnblogs.com/tandaxia/p/9338443.html 在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要 ...
微信小程序篇（微信小程序的支付）
微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口 ...

微信小程序钱包支付页面案例

小程序钱包页面

效果图

WXML代码

WXSS代码

JS代码

微信小程序钱包支付页面案例相关推荐

最新文章

热门文章