微信小程序自定義鍵盤 內(nèi)部虛擬支付
更新時(shí)間：2018年12月20日 16:45:47 作者：子謙呀
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義鍵盤，內(nèi)部虛擬支付，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義鍵盤的具體代碼，供大家參考，具體內(nèi)容如下
先看效果圖 ：
微信支付的話，調(diào)用微信支付接口是有自己的小鍵盤的，因?yàn)樾〕绦驔]有內(nèi)部鍵盤,所以有時(shí)候商城內(nèi)部需要零錢支付 ,會(huì)員卡支付,輸入密碼就需要自己做一個(gè)小鍵盤了。
css 跟 html不做過多說明 直接照搬就行 頁(yè)面上面的3個(gè)小圖片就不提供了 js 部分做了詳細(xì)注釋
<view class="popup-memu">
<view class="line" style="background-color: rgb(255, 255, 255)"></view>
<view class="payMode" bindtap="pay" data-pay_type='weipay'>
<image src="/images/wechat.png"></image>
<text style="width:70%">微信</text>
<image src="/images/arrows-right.png"></image>
</view>
<view class="payMode" bindtap="pay" data-pay_type='1'>
<image src="/images/vip.png"></image>
<text style="width:70%">會(huì)員卡</text>
<image src="/images/arrows-right.png"></image>
</view>
<view class="payMode" bindtap="pay" data-pay_type='2'>
<image src="/images/payPacket.png"></image>
<text style="width:70%">零錢</text>
<image src="/images/arrows-right.png"></image>
</view>
</view>
<!-- 密碼框帶鍵盤 -->
<action-sheet hidden="{{passwordInputHidden}}" bindchange="passwordInputHidden">
<view class='password-input'>
<view>
<text style="display:{{inputPassword[0]?'':'none'}}"></text>
</view>
<view>
<text style="display:{{inputPassword[1]?'':'none'}}"></text>
</view>
<view>
<text style="display:{{inputPassword[2]?'':'none'}}"></text>
</view>
<view>
<text style="display:{{inputPassword[3]?'':'none'}}"></text>
</view>
<view>
<text style="display:{{inputPassword[4]?'':'none'}}"></text>
</view>
<view>
<text style="display:{{inputPassword[5]?'':'none'}}"></text>
</view>
</view>
<view class='tips'>請(qǐng)輸入支付密碼(
<text>-￥100</text>)</view>
<view class='keyboard'>
<view class='left number'>
<view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view>
<view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view>
<view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view>
<view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view>
<view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view>
<view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view>
<view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view>
<view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view>
<view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view>
<view data-key="X" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>X</view>
<view data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view>
<view data-key="." hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view>
</view>
<view class='right ctr-btn'>
<view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='clear'>
<label class='iconfont icon-shanchu'></label>
</view>
<view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>取消</view>
</view>
</view>
</action-sheet>
CSS:
.popup-memu {
width: 100%;
background-color: white;
border-top: 1px solid #dedbd5;
border-bottom: 1px solid #eee;
display: block;
}
.line {
background-color: #eee;
margin-left: 10px;
height: 1px;
margin-right: 10px;
}
.popup-memu {
height: 50px;
font-size: 15px;
line-height: 50px;
border-bottom: 1px solid #eee;
}
.payMode {
display: flex;
background: #fff;
align-items: center;
border-bottom: 2px solid #eee;
}
.payMode image {
width: 30px;
height: 30px;
margin-left: 18px;
margin-right: 10px;
}
.sheet-content {
background-color: #fff;
padding: 0 15rpx;
}
/* 鍵盤 */
.password-input {
display: flex;
width: 660rpx;
border: 1px solid #ddd;
margin: 0 auto;
margin-top: 50rpx;
background-color: #fff;
border-radius: 3px;
}
.password-input view {
width: 110rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-right: 1px solid #ccc;
}
.password-input view:nth-child(6) {
border-right: none;
}
.password-input view text {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #333;
}
.tips {
font-size: 28rpx;
text-align: center;
margin-top: 5px;
}
.tips text {
color: #c30;
}
.keyboard {
width: 100%;
display: flex;
background-color: #fff;
border-top: 1px solid #eee;
margin-top: 50rpx;
}
.keyboard .number {
display: flex;
width: 570rpx;
flex-wrap: wrap;
}
.keyboard .number view {
width: 190rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
font-size: 46rpx;
font-weight: bold;
box-sizing: border-box;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.keyboard .ctr-btn {
width: 180rpx;
}
.keyboard .ctr-btn view {
height: 240rpx;
line-height: 240rpx;
text-align: center;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
.keyboard .ctr-btn view .iconfont {
font-size: 44rpx !important;
color: #c30;
}
.keyboard .ctr-btn view:nth-child(2) {
font-size: 46rpx;
color: #c30;
}
.keyboard .active {
background-color: #e4e7ed;
}
.activity {
background-color: #fff;
padding: 25rpx 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
border-bottom: 1px solid #f6f6f6;
}
.activity.activity-item {
font-size: 26rpx;
}
.arrows-right {
width: 30rpx;
height: 30rpx;
}
.arrows-right.active {
transform: rotate(270deg);
}
/* 鍵盤結(jié)束 */
js:
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
inputPassword: '', //輸入的密碼
passwordInputHidden: true,//hidden是true 默認(rèn)隱藏
pay_type: '',//支付方式
password: 123456,//設(shè)置的密碼 這里寫死 實(shí)際開發(fā)中后臺(tái)專門設(shè)置一個(gè)表存儲(chǔ)用戶設(shè)置的密碼
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
pay(e) {
//你選擇的支付方式
var pay_type = e.currentTarget.dataset.pay_type;
var _this = this;
if (pay_type == 'weipay') {
//此處寫入微信支付需要執(zhí)行的代碼不做過多介紹
} else {
//內(nèi)部支付 打開鍵盤
_this.passwordInputHidden();
}
},
inputPassword(e) {
//鍵盤輸入的密碼 賦值給inputPassword
this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;
this.setData({
inputPassword: this.data.inputPassword
});
//當(dāng)輸入密碼正確時(shí)
if (this.data.inputPassword.length == 6 && this.data.password == this.data.inputPassword) {
this.passwordInputHidden();//關(guān)閉小鍵盤
}
//當(dāng)輸入密碼錯(cuò)誤時(shí) 給個(gè)提示 并且把輸入的密碼清零
if (this.data.inputPassword.length == 6 && this.data.password != this.data.inputPassword) {
wx.showModal({
title: "提示",
content: "輸入密碼錯(cuò)誤",
})
this.setData({
inputPassword: ''
});
}
},
passwordInputHidden() {
this.setData({
passwordInputHidden: !this.data.passwordInputHidden //取反 打開關(guān)閉小鍵盤
});
this.setData({
inputPassword: ''
});
},
//刪除輸入錯(cuò)誤的密碼
clear() {
var index = this.data.inputPassword.length;
if (index > 0) {
var inputPassword = this.data.inputPassword.substr(0, index - 1);
this.setData({
inputPassword: inputPassword
});
}
},
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6中新增了箭頭函數(shù)這種語法,箭頭函數(shù)以其簡(jiǎn)潔性和方便獲取this的特性,接下來通過本文給大家分享ES6箭頭函數(shù)中的this，感興趣的朋友一起看看吧2018-02-02
JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法
這篇文章介紹了JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法，有需要的朋友可以參考一下2013-07-07
js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)
下面小編就為大家分享一篇js的函數(shù)的按值傳遞參數(shù)的實(shí)例，具有很好的參考價(jià)值，一起跟隨小編過來看看吧，希望對(duì)大家有所幫助2017-11-11
前幾天一個(gè)同事問我如下的JavaScript代碼如何理解2009-06-06
用JavaScript實(shí)現(xiàn)PHP的urlencode與urldecode函數(shù)
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)PHP的urlencode與urldecode函數(shù),很多情況下我們用了出來php urlencode出來的網(wǎng)址，需要的朋友可以參考下2015-08-08
微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)的方法
這篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
JavaScript的設(shè)計(jì)模式經(jīng)典之代理模式
代理模式的定義是把對(duì)一個(gè)對(duì)象的訪問, 交給另一個(gè)代理對(duì)象來操作。接下來通過本文給大家介紹JavaScript的設(shè)計(jì)模式之代理模式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
npm install報(bào)錯(cuò)無法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運(yùn)行 npm install 時(shí)遇到錯(cuò)誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個(gè) package.json 文件,只創(chuàng)建了一個(gè)package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下2024-02-02
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫一個(gè)格斗小游戲，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
ES6 Class中實(shí)現(xiàn)私有屬性的一些方法總結(jié)
這篇文章主要給大家介紹了關(guān)于ES6 Class中實(shí)現(xiàn)私有屬性的一些方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07