Framework7 - 单值选择器

描述

这是一个强大的组件，允许您从列表中选择任何值。

示例

以下示例演示了在 Framework7 中使用单值选择器：

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Picker with single value</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <div class="views">
      <div class="view view-main">
         <div class="pages">
            <div data-page="home" class="page navbar-fixed">
               <div class="navbar">
                  <div class="navbar-inner">
                     <div class="left"> </div>
                     <div class="center">Picker</div>
                     <div class="right"> </div>
                  </div>
               </div>
               <div class="page-content">
                  <div class="content-block-title">Picker with single value</div>
                  <div class="list-block">
                     <ul>
                        <li>
                           <div class="item-content">
                              <div class="item-inner">
                                 <div class="item-input">
                                    <input type="text" placeholder="Your iOS device" readonly id="picker-device">
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   <style>.swiper-slide{background:#fff;box-sizing:border-box;border:1px solid #ccc;line-height:120px;text-align:center;}.swiper-slide span{font-size:17px;}.swiper-container{height:120px;margin:0px 0 35px;}</style>
   <style>#picker-date-container .picker-item{color:#999;}#picker-date-container .picker-selected{color:#000;}@media (max-width: 767px) {#picker-date-container .picker-items{font-size:21px;}#picker-date-container .picker-item{height:36px;line-height:36px;padding:0 6px;}}</style>
   <script>
      var myApp = new Framework7();

      var pickerDevice = myApp.picker({
         input: '#picker-device',
         cols: [
            {
               textAlign: 'center',
               values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
            }
         ]
      });
   </script>
   
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理：

将上述 HTML 代码保存为picker_with_single_value.html文件到您的服务器根目录。
打开此 HTML 文件，地址为 https://127.0.0.1/picker_with_single_value.html，输出结果如下所示。
此示例允许您从列表中选择单个值。

framework7_picker.htm

打印页面