H5页面mui 省市区三级联动

最新推荐文章于 2024-08-02 16:04:15 发布

feng.zhang6536

最新推荐文章于 2024-08-02 16:04:15 发布

阅读量3.4k

点赞数 2

分类专栏：前端文章标签： H5 mui 三级联动

本文链接：https://blog.csdn.net/weixin_39218866/article/details/90543830

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

H5页面使用mui插件，实现省市区三级联动效果,主要是引用city.data.js和city.data-3.js这两个核心文件
在这里插入图片描述
准备工作：
js,css获取可以使用HBuilderX工具
HBuilderX工具链接: https://pan.baidu.com/s/1F6XYM1Z4u2NMaa7QHqCPKQ 提取码: wime 复制这段内容后打开百度网盘手机App，操作更方便哦
创建文件，选择hello mui,创建的文件里面有这些源css和js
在这里插入图片描述
或者在GitHub上去下载
https://github.com/dcloudio/mui/tree/master/plugin/picker/css

css文件

<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />

js文件

	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/mui.picker.min.js"></script>
	<!--省市区三级联动-->
	<script type="text/javascript" src="js/city.data.js"></script>
	<script type="text/javascript" src="js/city.data-3.js"></script>
	<script type="text/javascript" src="js/mui.poppicker.js"></script>

js代码

// 显示三级联动
	(function($, doc) {
		$.init();
		$.ready(function() {
			if(!doc.getElementById('addressPicker')){
				return;
			}
			var userPicker = new mui.PopPicker({
				//三级联动
				layer: 3
			});
			userPicker.setData(cityData3);
			var showUserPickerButton = doc.getElementById('addressPicker');
			showUserPickerButton.addEventListener('tap', function(event) {
				userPicker.show(function(items) {
					if(items[0]){
						$("#provinceSpan")[0].innerText = items[0].text;
					}
					if(items[1]){
						$("#citySpan")[0].innerText = items[1].text;
					}
					if(items[2]){
						$("#address1Span")[0].innerText = items[2].text;
					}
				});
			}, false);
		});
	})(mui, document);

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>添加新地址</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script> 
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
<script type="text/javascript">
	$(window).load(function(){
		$(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300)
	})
</script>
	<style>
		.spancolor{
			color: #999;
		}
	</style>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<header class="mui-bar mui-bar-nav report-header box-s" id="header">
			<a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
			<p>添加新地址</p>
			<span class="fr baocun" onclick="funtSubmitAddress()">保存</span>
	    </header>
	    <div id="main" class="mui-clearfix add-address">
	    	<div class="plist clearfloat data">
				<ul>
					<li class="clearfloat">
							<p class="fl">收货人</p>
							<input type="text" class="fl shuru" id="receiptName"  placeholder="长度为2至10个汉字" minlength="2" maxlength="10"
								   onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" />
					</li>
					<li class="clearfloat">
						<a href="#">
							<p class="fl">联系电话</p>
							<input type="text" id="receiptPhone" minlength="11" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
						</a>
					</li>
					<li class="clearfloat" id="addressPicker">
						<a href="#"  >
							<p class="fl">所在地区</p>&nbsp;
							<span class="spancolor" id="provinceSpan"></span>
							<span class="spancolor" id="citySpan"></span>
							<span class="spancolor" id="address1Span"></span>
							<i class="fr iconfont icon-jiantou1"></i>
						</a>
					</li>
					<li class="clearfloat">
						<a href="#">
							<p class="fl">邮政编码</p>
							<input type="text" id="receiptZipcode" minlength="6" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
						</a>
					</li>
				</ul>
			</div>
			<textarea id="receiptAddress" rows="4" cols="" placeholder="请填写详细地址，不少于5个字" class="textare box-s"></textarea>
	    	<div class="address-btn clearfloat">
	    		<span class="szwmr fl">设为默认</span>
	    		<a href="#" class="toggle toggle--on fr"></a>
	    	</div>
	    </div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/mui.picker.min.js"></script>
	<script type="text/javascript" src="js/others.js"></script>
	<script type="text/javascript" src="js/hmt.js" ></script>
	<script type="text/javascript" src="slick/slick.js"  ></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<!--插件-->
	<link rel="stylesheet" href="css/swiper.min.css">
	<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
<!--省市区三级联动-->
	<script type="text/javascript" src="js/city.data.js"></script>
	<script type="text/javascript" src="js/city.data-3.js"></script>
	<script type="text/javascript" src="js/mui.poppicker.js"></script>
</html>