mui solves the conflict between single webview and PopPicker

Keywords: Javascript Android Mobile

mui single webview mode, the page is as follows. There are two poppickers on it, and then the page can't slide up and down.

<div class="mui-content us-reimburse">
        <div class="block">
            <div class="us-list-title">
                Application information
            </div>
            <ul class="mui-table-view us-input-list list-form">
                <li class="mui-table-view-cell ">
                    <a class="" style="padding:0;">
                        <div class="us-list-row">
                            <label class="us-list-label" >Bureau Office</label>
                            <input id="selectDept" class="us-list-input" type="text" value="" readonly style="text-indent:20px" placeholder="Please select Office">
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell ">
                    <a class="" style="padding:0;">
                        <div class="us-list-row">
                            <label class="us-list-label" >Applicant</label>
                            <input id="selectUser" class="us-list-input" type="text" value="" readonly style="text-indent:20px" placeholder="Please select Office">
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell ">
                    <a class="" style="padding:0;">
                        <div class="us-list-row">
                            <label class="us-list-label" >time</label>
                            <input id="startDate" data-options='{"type":"date"}' style="width: 40%" class="us-list-input" type="text" value="" readonly placeholder="start time"> ━
                            <input id="endDate" data-options='{"type":"date"}' style="width: 40%" class="us-list-input" type="text" value="" readonly placeholder="End time">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
  <div class="mui-scroll-wrapper" id="tripPlanFormUI">
          <div class="mui-scroll">
                   <ul class="mui-table-view us-input-list us-collapse-list" style="touch-action: none"> </ul>
         </div>
   </div>

terms of settlement:
1. Page import: (be sure to write like this, leave a space after mui-special.js, or it will not come out, and the order will also be imported like this)

  <script>var h5pullDown = true;</script>
    <script type="text/javascript" src="/app/script/orderForm/mui-special.js "></script>
    <script type="text/javascript"  src="app/script/orderForm/appOrderFormList.js"></script>

2,mui-special.js
I uploaded it to, and can download what I need directly:
https://download.csdn.net/download/qq_36323075/12116292

3. Write the following code on js configuration:

mui.ready(function(){
    loadData();
    ButtonFind();
    //Solve the problem that Android phones can't scroll
     mui(".mui-scroll-wrapper").scroll({
        //bounce: false, / / whether the scroll bar has elasticity is true by default
        //indicators: false, / / whether to display scroll bar. The default value is true
    })
});

It should slide now.
After solving this problem, you will find another problem. Clicking back does not work:
There is a return button on our page, so I directly bind the return event as follows (clicking the return button on the mobile phone does not work):

 mui('#header').on('tap','#go_back',function(){
                var ws=plus.webview.currentWebview();
                plus.webview.close(ws);
            });
43 original articles published, 10 praised, 10000 visitors+
Private letter follow

Posted by timclaason on Mon, 20 Jan 2020 10:56:40 -0800