framework7 键盘 + 滑动不兼容

Posted 2023-03-21

【中文标题】framework7 键盘 + 滑动不兼容

【英文标题】：framework7 keypad + swipe incompatibility

【发布时间】：2017-08-25 16:42:59

【问题描述】：

作为标题，当键盘在滑动中时它不起作用，有什么想法可以解决吗？

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="text-align:center">
            <h3>Product name</h3>
            <div class="range-slider"><input type="range" min="0" value="" step="1" onchange="$$(this).parent().parent().find('span').html(this.value);" oninput="$$(this).parent().parent().find('input').val(this.value);"></div>
            <div class="list-block">
                <ul>
                    <li><div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">Qtd</div>
                            <div class="item-input">
                                <input type="text" class="kpNumpad">
                            </div>
                        </div>
                    </div></li>
                </ul>
            </div>
            <img  src="img/temp/img01-mobile-md.jpg" style="max-height: 45vh;">
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

创建键盘+滑动的脚本：

myApp.keypad( 'input': '.kpNumpad', 'dotButton': true, 'toolbarCloseText': 'Fechar', 'toolbarTemplate': '' );

myApp.swiper('.swiper-container',
    'onlyExternal': true,
    'nextButton': '.swiper-button-next',
    'prevButton': '.swiper-button-prev',
    'speed':  600,
    'loop': true, // <- DON'T USE IT, set it to false (see my answer)
    'effect': 'slide' //-- slide, coverflow, flip
);

先调用swiper或者keypad，不管是什么顺序，都不起作用，在浏览器中调试，keypad的div创建但不显示，输入变得不可用。

【参考方案1】：

通过为每个键盘输入创建一个实例来解决问题。

window.top.myKeyPad = [];
$$('.kpNumpad').each(function()
     var kpNum = myApp.keypad( 'input': $(this), 'dotButton': true,  'toolbarTemplate': '' );
     window.top.myKeyPad.push(kpNum);
);

注意：避免 Swiper 参数 'loop' == false，它会破坏键盘，另外，我强烈建议不要使用它，因为它会在循环重启时清除您的输入值