当前位置： 移动技术网 > IT编程>开发语言>c# > framework7 picker 具体使用

framework7 picker 具体使用

2019年09月09日  | 移动技术网IT编程  | 我要评论

官网地址：


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="content-security-policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title></title>

//css引用样式
<link rel="stylesheet" href="../framework7-4.4.10/packages/core/css/framework7.bundle.css">
<link rel="stylesheet" href="../framework7-4.4.10/kitchen-sink/core/css/app.css">
<link rel="apple-touch-icon" href="../framework7-4.4.10/kitchen-sink/img/f7-icon-square.png">

//js引用
<script src="../framework7-4.4.10/packages/core/js/framework7.bundle.min.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/routes.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/app.js"></script>
<script src="../framework7-4.4.10/packages/core/components/picker.js"></script>

//html

<div class="list" onclick="xuanzhe()" style="background-color: #ffffff; color: #555454; margin-top: 0px; width: 100%">
　　<%--<p style="font-size: 14px; padding-left: 20px;">选择值：</p>--%>
　　<input type="text" placeholder="选择值" readonly="readonly" id="demo-picker-describe" style="font-size: 14px; margin-left: 20px" />
</div>

//js
<script type="text/javascript">
<!--
var pickerdescribe = null;
function xuanzhe() {

　　//判断是否已经创建，已经创建的话就先清理掉
　　if (pickerdescribe != null) {
　　　　pickerdescribe.destroy();
　　}

　　pickerdescribe = app.picker.create({
　　　　inputel: '#demo-picker-describe',
　　　　rotateeffect: true,//3d效果
　　　　rendertoolbar: function () {
　　　　　　return '<div class="toolbar">' +
　　　　　　　　'<div class="toolbar-inner">' +
　　　　　　　　'<div class="left">' +
　　　　　　　　'<a href="#" class="link toolbar-randomize-link">取消</a>' +
　　　　　　　　'</div>' +
　　　　　　　　'<div class="right">' +
　　　　　　　　'<a href="#" class="link sheet-close popover-close">确定</a>' +
　　　　　　　　'</div>' +
　　　　　　　　'</div>' +
　　　　　　　　'</div>';
　　　　　　},//使用html格式化顶部提示（取消，确定）

　　　　//toolbarclosetext:"确定",//右上角文本（确定），此属性和rendertoolbar二选一即可
　　　　cols: [
　　　　　　{
　　　　　　textalign: 'left',
　　　　　　values: ('1 2 3 4 5 6 7 8 9 10 11 12 13').split(' ')
　　　　　　}
　　　　],

　　　　on: {//事件
　　　　　　closed: function (pickerdescribe) {
　　　　　　　　alert(pickerdescribe.getvalue());//获取当前选择值并弹框
　　　　　　},
　　　　}

　　});
　　pickerdescribe.open();//打开选择器
}
//-->
</script>

注意：app.js中定义app时，参数：root：“#app”为默认值，使用时需要将html中最外层div的id改为“app”（与app.js中定义app变量中root参数一致，否则点击无效）

如图：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网