Прокрутка часов вместо смены времени - PullRequest
Новая
       17

Прокрутка часов вместо смены времени

0 голосов
/ 06 февраля 2020

Я использую этот плагин https://github.com/weareoutman/clockpicker, чтобы отобразить селектор часов. Работает нормально, когда я тестирую его в своем браузере, но мне нужно запустить свое приложение на 7-дюймовом планшете и когда я пытаюсь изменить время прокрутки страницы, а не выбирать каждую минуту, поэтому я могу выбрать только 5, 10, 15, 20, 25 ... минут вместо 1, 3, 13, 22, 44 и т. Д. c ...

Другими словами, моя проблема в том, что страница работает прокрутка вместо изменения времени в моем контроле. Это также происходит, когда я использую панель инструментов устройства на chrome, я не могу выбрать время, перетаскивая курсор, это возможно только при нажатии. 

var input = $('#input-a');
input.clockpicker({
    autoclose: true
});

// Manual operations
$('#button-a').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
            .clockpicker('toggleView', 'minutes');
});
$('#button-b').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
            .clockpicker('toggleView', 'hours');
});
body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
}
.container {
    padding: 20px;
}
<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<div class="container">
    <input id="input-a" value="" data-default="20:48">
   
</div>

Что я могу сделать, чтобы решить эту проблему?

1 Ответ

1 голос
/ 07 февраля 2020

Я думаю, что ваша проблема заключается в загрузке активов ClockPicker с http вместо https. Вы должны попробовать изменить все на https: 

<link href="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

Вот скриншот видео таблицы эмулятора Android 8 с использованием вашего кода, который показывает, что он работает. Вы можете проверить это самостоятельно, используя эту ссылку: https://zikro.gr/dbg/so/60102176/.

Clockpicker Android tablet

ОБНОВЛЕНИЕ

Вы должны добавить touch-action: none к body, используя CSS. Это отключит сенсорные события при всплывающем окне выбора часов: 

var input = $('#input-a');
input.clockpicker({
    autoclose: true
});

// Manual operations
$('#button-a').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
        .clockpicker('toggleView', 'minutes');
});
$('#button-b').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
        .clockpicker('toggleView', 'hours');
});
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    touch-action: none;
}
.container {
    padding: 20px;
}
<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<div class="container">
    <input id="input-a" value="" data-default="20:48">
</div>
...