利用MUI滑動進行利息計算（移動端APP顯示）
阿新 • • 發佈：2017-05-15
this 運行 row class mage -a 比較 top 2個
在開發移動端的應用時，會用到很多的手勢操作，比如滑動、長按等，為了方便開放者快速集成這些手勢，mui內置了常用的手勢事件，其中滑動應用是比較常見的應用操作，本篇文章將講述如何利用滑動改變對應值進行計算和本金利息的方法。
案例要求：還款日期分為固定分期和隨借隨還，借款額度為1000~30000元，其中借款金額1000~6000的時候，可以隨借隨還且借款期不能超過45天，固定還款期可分為3、6、9期，超過6000元的時候分期數為9、12、18、24個月完成還款，根據利率計算以上各種情況下的每一期的還款。
首先建立基本樣式，如下圖所示
其運行代碼如下，css代碼此處篇幅有限不再贅述。。。。。。在此過程中，要註意考慮清楚借款金額大於6000的情況。
<div class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div class="top"> <div class="title"> 良心高利貸(滑稽) </div> <div class="mui-text-center mui-h5"style="color: #fff;margin-top: 20px;">申請金額（元）</div> <div class="mui-text-center mui-h1 money" id="block-range-val">￥1000</div> <div style="height: 50px;margin-top: 50px;"> <div style="width:50%;border-right: 1px solid #ccc;float: left;"> <p id="txt_1" style="text-align: center;color: #fff;">日綜合費率</p> <div id="txt_2" class="mui-text-center mui-h4" style="margin-top: -5px;">￥100/￥1000/1天</div> </div> <div style="width:48%;float: left;"> <p id="txt_3" style="text-align: center;color: #fff;">最長借款時間</p> <div id="txt_4" class="mui-text-center mui-h4" style="margin-top: -5px;">45天</div> </div> </div> </div> <div class="mui-input-row mui-input-range" style="padding: 10px 15px;"> <input type="range" id=‘block-range‘ value="1000" min="1000" max="30000" step="100"> </div> <div style="margin: 20px 10px;"> <p>借款期限</p> <div id="btns_1"> <button id="btn_1" class="mui-btn mui-btn-primary type">隨借隨還</button> <button id="btn_2" class="mui-btn mui-btn-primary mui-btn-grey type">3個月</button> <button id="btn_3" class="mui-btn mui-btn-primary mui-btn-grey type">6個月</button> <button id="btn_4" class="mui-btn mui-btn-primary mui-btn-grey type">9個月</button> </div> <div id="btns_2" style="display: none;"> <button id="btn_5" class="mui-btn mui-btn-primary mui-btn-grey type">9個月</button> <button id="btn_6" class="mui-btn mui-btn-primary mui-btn-grey type">12個月</button> <button id="btn_7" class="mui-btn mui-btn-primary mui-btn-grey type">18個月</button> <button id="btn_8" class="mui-btn mui-btn-primary mui-btn-grey type">24個月</button> </div> </div> </div> </div>
建立基本框架後，我們繼續利用滑動手勢和range實現其功能。在這一過程中，首先要實現各按鍵的功能，使其動起來
第一步，滑動按鈕時，使借貸金額的值和對應分期下的還款金額發生改變，其運行代碼如下
var rangeList = document.querySelectorAll(‘input[type="range"]‘); var range = 1000; for (var i = 0, len = rangeList.length; i < len; i++) { rangeList[i].addEventListener(‘input‘, function() { range = this.value; document.getElementById(this.id + ‘-val‘).innerHTML = ‘￥‘ + this.value; document.getElementById("txt_3").innerHTML = ‘還款期數‘; document.getElementById("txt_1").innerHTML = ‘每月還款金額‘; if (this.value > 6000) { document.getElementById("btns_2").style.display = ‘block‘; document.getElementById("btns_1").style.display = ‘none‘; btn_disabled(); document.getElementById("btn_8").classList.remove(‘mui-btn-grey‘); document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 1.8196 / 24).toFixed(2); document.getElementById("txt_4").innerHTML = ‘24個月‘; } else { document.getElementById("btns_2").style.display = ‘none‘; document.getElementById("btns_1").style.display = ‘block‘; btn_disabled(); document.getElementById("btn_4").classList.remove(‘mui-btn-grey‘); document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 1.2382 / 24).toFixed(2); document.getElementById("txt_4").innerHTML = ‘24個月‘; } }); }
經測試，顯示效果如下
接下來，實現其它分期按鈕的功能，在這一過程中，需要解決不同分期下的利率換算等問題，其運行代碼如下
mui(‘.mui-scroll-wrapper‘).scroll({
});
function btn_disabled() {
document.getElementById("btn_1").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_2").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_3").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_4").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_5").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_6").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_7").classList.add(‘mui-btn-grey‘);
document.getElementById("btn_8").classList.add(‘mui-btn-grey‘);
}
document.getElementById("btn_1").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘日綜合費率‘;
document.getElementById("txt_3").innerHTML = ‘最長借款時間‘;
document.getElementById("txt_2").innerHTML = ‘￥100/￥1000/1天‘;
document.getElementById("txt_4").innerHTML = ‘45天‘;
});
document.getElementById("btn_2").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 2 / 3).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘3個月‘;
});
document.getElementById("btn_3").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 3 / 6).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘6個月‘;
});
document.getElementById("btn_4").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 4 / 9).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘9個月‘;
});
document.getElementById("btn_5").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 4 / 9).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘9個月‘;
});
document.getElementById("btn_6").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 5 / 12).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘12個月‘;
});
document.getElementById("btn_7").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 6 / 18).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘18個月‘;
});
document.getElementById("btn_8").addEventListener(‘tap‘, function() {
btn_disabled();
this.classList.remove(‘mui-btn-grey‘);
document.getElementById("txt_1").innerHTML = ‘每月還款金額‘;
document.getElementById("txt_3").innerHTML = ‘還款期數‘;
document.getElementById("txt_2").innerHTML = ‘￥‘ + (range * 7 / 24).toFixed(2);
document.getElementById("txt_4").innerHTML = ‘24個月‘;
});
document.getElementById("apply").addEventListener(‘tap‘, function() {
if(!require_login){
mui.openWindow({
id: ‘business-list‘,
url: ‘business-list.html‘,
show: {
aniShow: ‘pop-in‘,
duration: 300
},
waiting: {
autoShow: false
}
});
return;
}
})
其運行結果如下圖
符合設計要求
利用MUI滑動進行利息計算（移動端APP顯示）