9***@qq.com
9***@qq.com
  • 发布:2021-03-15 16:22
  • 更新:2021-03-15 16:22
  • 阅读:721

mui slider隐藏后再显示,mui-control-item和mui-slider-item选中

分类:MUI

是这样的,在slider组件中点击一个按钮,隐藏真个slider组件,显示一个div(包含上拉加载和下拉刷新),当选择pullRefresh中的一项时,要隐藏pullRefresh,显示slider组件。如果当点击pullRefresh生成项时,未关闭软键盘,就会出现mui-control-item和mui-slider-item选中项不一致。


大佬们,帮忙看看。

<div class="mui-content inner">  
            <div id="slider" class="mui-slider">  
                <div id="sliderSegmentedControl"  
                    class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">  
                        待办公文  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        已办公文  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        全部公文  
                    </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                </div>  
            </div>  

            <h5 class="mui-content-padded">Color</h5>  
            <div class="mui-card">  
                <form class="mui-input-group">  
                    <div class="mui-input-row mui-radio">  
                        <label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>  
                        </label>  
                        <input name="radio1" type="radio" checked value="primary">  
                    </div>  
                    <div class="mui-input-row mui-radio">  
                        <label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>  
                        </label>  
                        <input name="radio1" type="radio" value="positive">  
                    </div>  
                    <div class="mui-input-row mui-radio">  
                        <label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>  
                        </label>  
                        <input name="radio1" type="radio" value="negative">  
                    </div>  
                </form>  
            </div>  
            <form class="mui-input-group">  
                <div class="mui-input-row" id="wfdd">  
                    <label>选择地点</label>  
                    <span style="height: 40px;line-height: 40px;">请选择地点</span>  
                    <a class="mui-navigate-right"></a>  
                </div>  
            </form>  
        </div>  
        <div class="mui-content wfdd">  
            <div class="mui-input-row mui-search">  
                <input type="search" id="search" class="mui-input-clear" placeholder="请输入关键字">  
                <button class="mui-btn mui-btn-primary" type="button" id="query">搜索</button>  
            </div>  
            <div id="pullRefresh" class="mui-content mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <!--数据列表-->  
                    <ul class="mui-table-view mui-table-view-chevron">  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right">item1</a>  
                        </li>  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right">item1</a>  
                        </li>  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right">item1</a>  
                        </li>  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right">item1</a>  
                        </li>  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right">item1</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
        <script src="../js/framework/mui.min.js"></script>  
        <script>  
            mui.init({  
                swipeBack: false  
            });  
            (function($) {  
                $('.mui-scroll-wrapper').scroll({  
                    indicators: false //是否显示滚动条  
                });  
                var html2 =  
                    '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';  
                var html3 =  
                    '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';  
                var item2 = document.getElementById('item2mobile');  
                var item3 = document.getElementById('item3mobile');  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    if (e.detail.slideNumber === 1) {  
                        if (item2.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item2.querySelector('.mui-scroll').innerHTML = html2;  
                            }, 500);  
                        }  
                    } else if (e.detail.slideNumber === 2) {  
                        if (item3.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item3.querySelector('.mui-scroll').innerHTML = html3;  
                            }, 500);  
                        }  
                    }  
                });  
                var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');  
                $('.mui-input-group').on('change', 'input', function() {  
                    if (this.checked) {  
                        sliderSegmentedControl.className =  
                            'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-' +  
                            this.value;  
                        //force repaint  
                        sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));  
                    }  
                });  
            })(mui);  

            mui(".mui-content").on('tap', '#wfdd', function() {  
                mui(".wfdd")[0].style.display = "block";  
                mui(".inner")[0].style.display = "none";  
            })  
            mui("#pullRefresh").on('tap', '.mui-table-view .mui-table-view-cell', function() {  
                document.activeElement.blur();  
                mui('.wfdd')[0].style.display = 'none';  
                mui('.inner')[0].style.display = '';  
                mui('#slider').slider().gotoItem(3);  
            })  
        </script>
2021-03-15 16:22 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复