Interest calculation with MUI Swipe (mobile app display)

In the development of mobile applications, there will be a lot of gesture operations, such as sliding, long-press, etc., in order to facilitate the quick integration of these gestures, MUI built-in common gesture events, where the sliding application is a more common application operations, this article will explain how to use the sliding change the corresponding value of the calculation and principal interest method.

Case requirements: The repayment date is divided into fixed instalment and borrowing with the loan amount of 1000~30000 yuan, in which the borrowing value 1000~6000, you can borrow along with the loan period of not more than 45 days, fixed repayment period can be divided into 3, 6, 9 period, more than 6000 yuan when the number of instalments 9, 12, 18, 24 months to complete the repayment, according to the interest rate calculation of each of the above circumstances of the repayment of each period.

First create the basic style, as shown in

Its running code is as follows, CSS code here is limited space is no longer repeat ... In this process, it is important to consider the situation that the borrowing amount is greater than 6000.

<Divclass= "Mui-content mui-scroll-wrapper">            <Divclass= "Mui-scroll">                <Divclass= "Top">                    <Divclass= "title">conscience Usury (funny)</Div>                    <Divclass= "Mui-text-center mui-h5"style= "color: #fff; margin-top:20px;">Application Amount (RMB)</Div>                    <Divclass= "Mui-text-center mui-h1 Money"ID= "Block-range-val">￥1000</Div>                    <Divstyle= "height:50px;margin-top:50px;">                        <Divstyle= "width:50%;border-right:1px solid #ccc; float:left;">                            <PID= "Txt_1"style= "Text-align:center;color: #fff;">Daily comprehensive Rates</P>                            <DivID= "Txt_2"class= "Mui-text-center mui-h4"style= "Margin-top: -5px;">￥100/￥1000/1 days</Div>                        </Div>                        <Divstyle= "Width:48%;float:left;">                            <PID= "Txt_3"style= "Text-align:center;color: #fff;">Maximum borrowing time</P>                            <DivID= "Txt_4"class= "Mui-text-center mui-h4"style= "Margin-top: -5px;">45 days</Div>                        </Div>                    </Div>                </Div>                <Divclass= "Mui-input-row mui-input-range"style= "padding:10px 15px;">                    <inputtype= "Range"ID= ' Block-range 'value= "+"min= "+"Max= "30000"Step= "+">                </Div>                <Divstyle= "margin:20px 10px;">                    <P>Borrowing period</P>                    <DivID= "Btns_1">                        <ButtonID= "Btn_1"class= "mui-btn mui-btn-primary type">Along with the borrowing and</Button>                        <ButtonID= "Btn_2"class= "mui-btn mui-btn-primary mui-btn-grey Type">3 months</Button>                        <ButtonID= "Btn_3"class= "mui-btn mui-btn-primary mui-btn-grey Type">6 months</Button>                        <ButtonID= "Btn_4"class= "mui-btn mui-btn-primary mui-btn-grey Type">9 months</Button>                    </Div>                    <DivID= "Btns_2"style= "Display:none;">                        <ButtonID= "Btn_5"class= "mui-btn mui-btn-primary mui-btn-grey Type">9 months</Button>                        <ButtonID= "Btn_6"class= "mui-btn mui-btn-primary mui-btn-grey Type">12 months</Button>                        <ButtonID= "Btn_7"class= "mui-btn mui-btn-primary mui-btn-grey Type">18 months</Button>                        <ButtonID= "Btn_8"class= "mui-btn mui-btn-primary mui-btn-grey Type">24 months</Button>                    </Div>                </Div>            </Div>        </Div>

With the basic framework in place, we continue to use the swipe gesture and range to achieve its functionality. In this process, the first thing to achieve the function of the keys, so that they move up

The first step, when the slide button, the value of the loan amount and the corresponding instalment of the repayment amount changes, its operating code is as follows

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= ' repayment period '; document.getElementById ("txt_1"). InnerHTML= ' monthly repayment amount '; 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 months ';                    } 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 months ';        }            }); }

After testing, the results are shown as follows

Next, the implementation of other functions of the staging button, in this process, the need to solve the different stages of the interest rate conversion and other issues, its operating code is as follows

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 = ' daily comprehensive rate ';            document.getElementById ("Txt_3"). InnerHTML = ' maximum borrowing time '; Document.geteleMentbyid ("Txt_2"). InnerHTML = ' ￥100/￥1000/1 days ';        document.getElementById ("Txt_4"). InnerHTML = ' 45 days ';        });            document.getElementById ("Btn_2"). AddEventListener (' tap ', function () {btn_disabled ();            This.classList.remove (' Mui-btn-grey ');            document.getElementById ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 2/3). toFixed (2);        document.getElementById ("Txt_4"). InnerHTML = ' 3 months ';        });            document.getElementById ("Btn_3"). AddEventListener (' tap ', function () {btn_disabled ();            This.classList.remove (' Mui-btn-grey ');            document.getElementById ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 3/6). toFixed (2); document.getElementById ("Txt_4"). InnerHTML = '6 months ';        });            document.getElementById ("Btn_4"). AddEventListener (' tap ', function () {btn_disabled ();            This.classList.remove (' Mui-btn-grey ');            document.getElementById ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 4/9). toFixed (2);        document.getElementById ("Txt_4"). InnerHTML = ' 9 months ';        });            document.getElementById ("Btn_5"). AddEventListener (' tap ', function () {btn_disabled ();            This.classList.remove (' Mui-btn-grey ');            document.getElementById ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 4/9). toFixed (2);        document.getElementById ("Txt_4"). InnerHTML = ' 9 months ';        });           document.getElementById ("Btn_6"). AddEventListener (' tap ', function () { Btn_disabled ();            This.classList.remove (' Mui-btn-grey ');            document.getElementById ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 5/12). toFixed (2);        document.getElementById ("Txt_4"). InnerHTML = ' 12 months ';        });            document.getElementById ("Btn_7"). AddEventListener (' tap ', function () {btn_disabled ();            This.classList.remove (' Mui-btn-grey ');            document.getElementById ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 6/18). toFixed (2);        document.getElementById ("Txt_4"). InnerHTML = ' 18 months ';        });            document.getElementById ("Btn_8"). AddEventListener (' tap ', function () {btn_disabled ();            This.classList.remove (' Mui-btn-grey '); Document.getelementbyiD ("Txt_1"). InnerHTML = ' monthly repayment amount ';            document.getElementById ("Txt_3"). InnerHTML = ' repayment period ';            document.getElementById ("Txt_2"). InnerHTML = ' ￥ ' + (range * 7/24). toFixed (2);        document.getElementById ("Txt_4"). InnerHTML = ' 24 months ';        }); document.getElementById ("Apply"). AddEventListener (' tap ', function () {if (!require_login) {Mui.op Enwindow ({id: ' business-list ', url: ' business-list.html ', show:                    {anishow: ' pop-in ', duration:300},                Waiting: {autoshow:false}});            Return }                    })

The results of the operation are as follows

Meets design Requirements

Interest calculation with MUI Swipe (mobile app display)