JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

Sul lato mobile del sito web dell'app, quando si utilizza una lista a discesa, l'esperienza dell'uso della lista a discesa tradizionale è molto scarsa, in generale, le interfacce di funzione di interazione fatte meglio non utilizzano direttamente la lista a discesa, quindi le liste a discesa native dell'app sono elenchi a finestra a comparsa. Naturalmente, anche l'app web dovrebbe essere fatta così in termini di esperienza utente. Di recente, durante lo sviluppo dell'app web, ho incontrato questa esigenza, non solo il selettore di date, ma anche le liste di dati, le liste di variabili e altre esigenze di lista a discesa. Dopo aver cercato a lungo online, ho trovato solo un modello di mobiscroll piuttosto buono, ma è piuttosto complicato da scaricare e sembra strano. jQuery.mobile e jeasyui.mobile non offrono questo tipo di controllo, non so perché. Anche se non mi specializzo nella sviluppo frontend, penso che non sia difficile sviluppare qualcosa di universale come me. Dopo aver passato la notte a casa e dopo aver provato diversi metodi, ho finalmente trovato un metodo quasi perfetto! Ho continuato a migliorarlo nel corso dell'uso e ora lo offro pubblicamente a tutti gli sviluppatori.

Guardiamo prima l'effetto visivo:

Poiché la scorrimento di questo componente è utilizzato tramite il metodo di scorrimento nativo di div, quando utilizzato su uno schermo touch può avere un effetto di scorrimento inerziale e anche supporta l'operazione del mouse, ma non ha implementato l'effetto di scorrimento inerziale. Poiché questo componente è principalmente orientato verso lo schermo touch, quindi è sufficiente che funzioni bene su uno schermo touch, e anche io non ho la voglia di creare l'effetto speciale per la versione mouse. Questo componente è stato encapsulato come plugin jQuery, senza bordi, con larghezza del 100%, molto facile da usare, ad esempio, quando inserito nella finestra a comparsa, avrà l'effetto come mostrato nell'immagine.

代码的使用方法如下：

$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data1,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value);
}
});

以下是用弹窗完整的使用方法代码，效果如上图所示：

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'设置数值'">
<div id="scrollbox"></div>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dialog').dialog('close')">确认</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//对象型数据
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "数据" + i;
data.push(m);
}
$("#dialog").dialog();
//链接打开对话框
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//重新赋值
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value.id);
}
});
event.preventDefault();
});
});
</script>

也可以这样使用：

//字符串数据
var data1 = [];
for (var i = 0; i < 100; i++) {
data1.push(i);
}
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data1,
onSelected: function (index, value) {
$("#Text1").val(value);
}
});
$("#dialog-link1").click(function (event) {
$("#dialog").dialog("open").dialog('center');
event.preventDefault();
});

　Se si desidera un effetto tridimensionale leggero, aggiungere direttamente lo stile:

#cover_top_EasyScrollBox{
background: -ms-linear-gradient(top, #000000, #ccc); /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#000000), to(#ccc));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #000000, #ccc); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #000000, #ccc); /*Opera 11.10+*/
}
#cover_bottom_EasyScrollBox{
background: -ms-linear-gradient(top, #ccc, #000000); /* IE 10 */
background:-moz-linear-gradient(top,#ccc,#0000ff);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ccc), to(#000000));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ccc, #000000); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ccc, #000000); /*Opera 11.10+*/
}

The above-mentioned is the js development touch screen web page version of the imitation app pop-up type scroll list selector/date selector introduced by the editor to everyone, hoping it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time. At the same time, I also thank everyone for their support for the Yell Tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not make artificial editing, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#oldtoolbag.com (when sending an email, please replace # with @) to report, and provide relevant evidence. Once confirmed, this site will immediately delete the suspected infringing content.