手機端增加地址選擇插件

需求：當點擊收貨地址從下面時彈出地址選擇的頁面，類似美團的實現


實現方式：用 ?SUI Mobile??


使用方式：

1. 引用靜態資源

我們提供了CDN地址可以直接使用，并且強烈建議使用我們的CDN而不是下載到本地。

<!--資源引用-->?

?<link rel="stylesheet" >

?<link rel="stylesheet" >

js資源

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>?

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>?

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>

?<script type="text/javascript" src="http://g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>


給對應的input綁定id和默認值 ? ? ? ?id='city-picker' ? ? ? ?value="廣東 廣州 天河區"


然后再頁面底部添加如下代碼：


<script>

?$("#city-picker").cityPicker({

? ? ? ? ?toolbarTemplate: "<header class='bar bar-nav'>\ <button class='button button-link pull-right close- ? ? ? ? ? ? ?picker'>確定</button>\ <h1 class='title'>選擇收貨地址</h1></header>"?

?});

?</script>


然后就實現了再點擊地址輸入框的時候彈出地址選擇頁面


最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容