pushbutton 挪动端弹出列表挑选框

2024年5月30日 195次阅读 来源: gtd_alp

pushbutton 挪动端弹出列表挑选框

挪动端从下往上推动画结果端弹出列表挑选框，顺应一切主流挪动端机型，支撑Node引入，require引入;若有效得不爽能够随时提意见，感谢。

demo地点: https://gtdalp.github.io/widg…

github地点:https://github.com/gtdalp/pus…

npm装置

npm install pushbuttonjs
使用方法以下：

1、html构造

<section id=”pushbutton”></section>
2、须要引入的js

<script src=”../src/jslib/zepto.min.js”></script> <script src=”../build/pushbutton.min.js”></script>
3、挪用

new Pushbutton(‘#pushbutton’, {

data: [
    {text:'照相', cls: 'photo', attr: {'data-key': 'photo'} },
    {text:'录相', attr: [
        {key1: 'video2'},
        {key2: 'video2'}
    ]},
    {text:'语音录入'}
], // 点击回调 返回true 则不隐蔽弹出框 onClick: function( e ) { console.log(e); // 返回重要有效数据 // e.target  当前dom节点 // e.data  当前点击的data // e.index  当前点击的挑选是第几个 return true;
}, // maxHeight: 100,  // 默许显现的高度 isShow: true // 默许是不是显现 }); var dom = document.getElementById("pushbuttonClick"); var refresh = document.getElementById("refresh"); dom.onclick = function () { pub.show();

} refresh.onclick = function () { pub.refresh({

    data: [{text: '1321321321'}]
});

}
结果图 demo1.png

4、API

4.1 options.data 数据

options.data = [

{text:'照相', cls: 'photo', attr: {'data-key': 'photo'} },
{text:'录相', attr: [
    {key1: 'video2'},
    {key2: 'video2'}
]},
{text:'语音录入'}

]

4.2 options.onClick 点击回调 返回true 则不隐蔽弹出框

options.onClick = function( e ) { console.log(e); // 返回重要有效数据 // e.target 当前dom节点 // e.data 当前点击的data // e.index 当前点击的挑选是第几个 return true;
}
4.3 maxHeight 默许显现的高度

options.maxHeight = 100 // 默许显现的高度
4.4 isShow 默许是不是显现

options.isShow = false // 默许是不是显现 默许不显现
4.5 show 显现

Pushbutton.show() // 显现
4.6 hide 隐蔽

Pushbutton.hide() // 隐蔽
4.7 refresh 革新

Pushbutton.refresh({

.. // options 能够传options }) // 革新
    原文作者：gtd_alp
    原文地址: https://segmentfault.com/a/1190000007381981
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞