单值选取器单值选取器|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="http://img.readke.com/220423/0I6336121-0.jpg"> < /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', 'iPhone 7', 'iPhone 7s', 'iPhone 8', 'iPhone X']}]}); < /script> < /html>

【单值选取器】立即测试