手机端增加地址选择插件

需求：当点击收货地址从下面时弹出地址选择的页面，类似美团的实现


实现方式：用  SUI Mobile  


使用方式：

1. 引用静态资源

我们提供了CDN地址可以直接使用，并且强烈建议使用我们的CDN而不是下载到本地。

<!--资源引用--> 

 <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

 <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">

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="//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>


然后就实现了再点击地址输入框的时候弹出地址选择页面


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容