web学习笔记16-移动端地址选择功能-v2.0封装

news/2024/4/15 7:38:22

    按照之前的约定,把之前地址选择控件进行了封装,做成了一个直接可以调用的版本,不用太多繁琐的东西,直接使用。

    效果如图(跟之前一样):
效果图

    这次把jquery拿掉,全部都是用js原生写的,不过动态效果还没有加进去,不过凑合能用了,弹出效果暂时还没做,主要功能性的东西做出来了,后期有时间会做一下,不过到时候就不更新文章了。

    没有其他兴趣的就直接看代码。github selectAddress-v2.0

    接下去进去正题。这次封装多多少少也花了点时间,平时干活完整的封装一个插件次数还是不算多,这次正好借着这个机会,慢慢一步步的摸索出来封装成插件的一种方式。

第一步:创建基本文件,确定思路

    创建项目之后,创建三个文件,分别是html,css,js文件。
图片.png

    这次封装的思路呢,是将js部分的声明一个对象,在对象中声明一个启动方法,把所有的逻辑部分内容放进这个启动方法里面。在调用方法弹出选择框的时候,将基本的接口数据,地址信息都传递过去,然后进行一些处理。

第二步:构建基本页面,编写css

    那么首先构建基本的页面和样式。按照之前版本样式不变,只不过html部分只有基本的按钮就行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>chooseAddress</title><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1, maximum-scale=1"/><link rel="stylesheet" href="address.css">
</head>
<body>
<div class="but" onclick="show()">点击选择地址</div><div class="product_details_address" onclick="show()"><div class="choose_address jdshop_alignment_center"><div class="details_address"><div><span>送至</span><img src="https://img-blog.csdnimg.cn/2022010707071082003.png"><span id="product_address_show" style="max-width: 250px">北京市,北京市,朝阳区,建外街道</span></div></div><div class="details_stock"><img src="https://img-blog.csdnimg.cn/2022010707071199396.png"></div></div>
</div></body>
<script src="address.js"></script>
</html>

    上面那部分是基本的html,加上样式

body, html {-webkit-user-select: none;user-select: none
}html {-webkit-text-size-adjust: 100%
}body {line-height: 1.6;background-color: #f5f5f9;color: #4a4a4a;font-size: 14px;font-family: Arial, '微软雅黑', Helvetica Neue, Helvetica, sans-serif;-webkit-overflow-scrolling: touch;overflow-scrolling: touch
}* {margin: 0;padding: 0
}a img {border: 0
}a {text-decoration: none;-webkit-tap-highlight-color: transparent;-webkit-appearance: none
}@font-face {font-weight: 400;font-style: normal;font-size: 14px;font-family: Arial, '微软雅黑', Helvetica Neue, Helvetica, sans-serif
}input, textarea {border: 0;outline: 0;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;font-size: inherit;color: inherit
}.product_details_address {position: relative;margin: 10px;padding: 10px;border-radius: 8px;background: #fff;box-shadow: 0 2px 3px #e9e9e9;
}
.jdshop_alignment_center, .jdshop_alignment_middle, .jdshop_alignment_right, .jdshow_center_center {-webkit-box-align: center;-webkit-align-items: center;align-items: center;
}
.jdshop_alignment_bottom, .jdshop_alignment_center, .jdshop_alignment_top {-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;
}
.jdshop_alignment_bottom, .jdshop_alignment_center, .jdshop_alignment_left, .jdshop_alignment_middle, .jdshop_alignment_right, .jdshop_alignment_top, .jdshow_center_center {display: -webkit-box;display: -webkit-flex;display: flex;
}
.details_address {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;
}
.product_details_address .choose_address .details_address div:first-child {height: 22px;
}
.details_address div {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;
}
.product_details_address .choose_address .details_address span:first-child {color: #8a8a8a;
}
.product_details_address .choose_address .details_address span {display: inline-block;color: #4a4a4a;margin-right: 10px;max-width: 170px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.product_details_address .choose_address .details_address img {width: 18px;height: 18px;margin: 2px 10px 2px 0;
}
.product_details_address .choose_address .details_address span {display: inline-block;color: #4a4a4a;margin-right: 10px;max-width: 170px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.but{margin: 0 auto;width: calc(50%);height: 30px;margin-top: 100px;background-color: lightcyan;line-height: 30px;text-align: center;font-size: 14px;
}
.jdshop_alignment_middle{-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: start;-webkit-justify-content: flex-start;justify-content: flex-start;display: -webkit-box;display: -webkit-flex;display: flex;
}.yls_address_bg {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: #000;z-index: 500;opacity: .3;-webkit-transition: opacity .3s;transition: opacity .3s;touch-action: none
}
.yls_address_main {position: fixed;left: 0;width: 100%;bottom: 0;background: #fff;border-radius: 10px 10px 0 0;box-shadow: 0 0 3px #e9e9e9;-webkit-transform: translate3d(0, 120%, 0);transform: translate3d(0, 120%, 0);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;z-index: 1001;transform: translate3d(0, 0, 0);
}
.yls_address_pop_top {text-align: center;height: 50px;margin-bottom: 5px;
}
.yls_address_pop_title {height: 100%;line-height: 50px;
}
.yls_address_pop_cancel {position: absolute;right: 0;top: 0;width: 50px;height: 50px;
}
.yls_address_pop_cancel::before, .yls_address_pop_cancel::after {content: '';width: 16px;height: 1px;background: #000;display: block;position: absolute;right: 10px;top: 25px;
}
.yls_address_pop_cancel::before {transform: rotate(45deg); /*进行旋转*/
}
.yls_address_pop_cancel::after {transform: rotate(-45deg);
}
.yls_address_pop_main {}
.yls_address_product{}
.yls_address_select{height: calc(60vh);width: 100%;position: relative;overflow: hidden;
}
.yls_address_top_address{font-size: 12px;height: 35px;overflow: hidden;border-bottom: 1px solid #ddd;
}
.yls_address_top_address>div{padding: 5px 5px;margin: 0 5px;white-space: nowrap;
}
.yls_address_top_address>div.show{color: #c91623;border-bottom: #c91623 1px solid;
}
.yls_address{position: absolute;left: 0;top: 45px;overflow: auto;width: 100%;height: calc(60vh - 35px);-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);-webkit-transition: -webkit-transform .3s .2s;transition: -webkit-transform .3s .2s;transition: transform .3s .2s;transition: transform .3s .2s,-webkit-transform .3s .2s;
}
.yls_address p{padding: 8px 10px;font-size: 14px;
}
.yls_address p.p_show {position: relative;color: #c91623;
}
.yls_address.show {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
}

    上面css部分也是包含弹出框样式的,只是弹出框部分的html没有放在页面上,而是每次弹出的时候动态添加到页面上的,这样出来的效果是这样的,没啥别的,

第三步:了解调用方法数据结构

    点击显示弹框的方法show中,需要这么写。其实这部分应该在完成整个js之后写的,不过放在前面也一样。

function show() {// 一般情况,在调用的时候,获取当前最新的地址数据,和对应的idvar startId = [1804,1805,1829,1831];var startName = ['北京市','北京市','朝阳区','朝外街道'];var url = '';//你的请求url信息//声明对象,存放请求数据url,地址信息,和需要显示最后选择地址的元素,加上一个回调方法用来获取选择完毕之后的地址。var details = {url:url,startId:startId,startName:startName,targetDom:document.getElementById('product_address_show'),fn:function () {//在点击四级地址之后回调方法中可以获取到相应的数据console.log(yls_address.CityArr);console.log(yls_address.CityIdArr);}};//调用run方法进行弹出框以及选择地址。yls_address.run(details)}

第四步:编辑逻辑部分

1:声明对象,声明方法

    html部分的东西就这么多,上面这个其实就是使用方法,接下来是js文件的内容。有点不知道怎么分解了说了。

首先就是声明一个对象,在对象中声明一个方法。

var yls_address = {
//details就是调用的时候传进来的方法run: function (details) {}
}

2:处理传递过来的数据,创建不同的变量赋值

    接下来是先获取传过来details里面的一些数据。在run里面写

        var _this = this;//初始化idvar thisStartId = details.startId;//初始化Namevar thisStartName = details.startName;//获取请求urlvar thisUrl = details.url || '';//获取回调方法var thisFn = details.fn || '';//获取最后需要显示地址信息的元素,可有可无的var thisWrightHtml = details.targetDom || '';//因为要经常获取元素,所以把前缀单独声明了var ylsAd =  'yls_address_';var ylsTopAd =  'yls_top_address_';//判断初始数据是否正确if (thisStartName.length === thisStartName.length) {initHtml();//初始化htmlgetData(0, 1, thisStartName[0],1);//获取数据} else {console.log('初始值出问题了');}

3:初始化弹框html,添加到页面上

    initHtml()这方法就是创建html并且初始化渲染到页面上,getData方法就是调用接口获取地址数据的。接下来就是初始化方法和获取数据方法的编写了。

         /***初始化弹出框的html,去除一些样式*@method initHtml**/function initHtml() {//生成html添加到页面var thisInnerHtml = '<div class="yls_address_bg"></div>' +'<div class="yls_address_main">' +' <div class="yls_address_pop_top">' +'<div class="yls_address_pop_title">请选择地址</div>' +'<div class="yls_address_pop_cancel"></div>' +'</div>' +'<div class="yls_address_pop_main">' +'<div class="yls_address_product">' +'<div class="yls_address_select">' +'<div class="yls_address_top_address jdshop_alignment_middle">' +'<div id="yls_top_address_1">请选择</div>' +'<div id="yls_top_address_2"></div>' +'<div id="yls_top_address_3"></div>' +'<div id="yls_top_address_4"></div>' +'<div id="yls_top_address_5"></div>' +'</div>' +'<div class="yls_address" id="yls_address_1"></div>' +'<div class="yls_address" id="yls_address_2"></div>' +'<div class="yls_address" id="yls_address_3"></div>' +'<div class="yls_address" id="yls_address_4"></div>' +'<div class="yls_address" id="yls_address_5"></div>' +'</div></div></div></div>';addNode("div", thisInnerHtml, "yls_address_choose", '');for(var i = 1; i <= thisStartId.length;i++){//获取每个地址列表var ad = document.getElementById(ylsAd + i);//获取四个顶部选中的地址var topad = document.getElementById(ylsTopAd + i);//清空地址列表ad.innerHTML = '';//清空地址列表ad.className = 'yls_address';//初始化列表的样式topad.innerHTML = '';//清空选中地址的样式topad.removeAttribute('class');}}/***为页面添加html*@method addNode*@param tag 标签*@param innerHtml 标签内html*@param id 标签id*@param className 标签样式**/function addNode(tag, innerHtml, id, className) {var obj = document.createElement(tag);if (id) {obj.id = id;}if(className){obj.className=className}obj.innerHTML = innerHtml;document.body.appendChild(obj);return obj;}

4:绑定关闭弹框事件,移除相应元素

    再添加html到页面之后 并初始化,情况里面的内容,然后循环调用接口获取初始化的四级内容。不过与此同时先把背景和叉叉按钮上添加关闭弹框的点击事件,并且将移除元素的方法也写上。

         //绑定关闭按钮方法document.getElementsByClassName('yls_address_pop_cancel')[0].addEventListener("click",hideAddress,false);document.getElementsByClassName('yls_address_bg')[0].addEventListener("click",hideAddress,false);/***将数据渲染到当前列表的方法*@method remove*@param _element 删除的元素**/function remove(_element) {var _parentElement = _element.parentNode;//找到父元素,然后删除if (_parentElement) {_parentElement.removeChild(_element);}}/***隐藏弹框*@method hideAddress**/function hideAddress() {remove(document.getElementById("yls_address_choose"));}

5:获取地址数据

    获取数据方法

         /***获取地址列表数据方法*@method getData*@param areaId 点选地址的areaid*@param addressNum yls_address是第几个*@param name 是点击选择的地址name*@param isInit 是点是初始化,1是初始化,0不是初始化*@return 返回值说明*/function getData(areaId, addressNum, name, isInit){addressNum = parseInt(addressNum);//转成数字,防止变成字符串isInit = parseInt(isInit);//转成数字,防止变成字符串var addressUrl = thisUrl + areaId;//请求数据var xhr = function () {if (window.XMLHttpRequest) {return new XMLHttpRequest();}else {return new ActiveObject('Micrsorf.XMLHttp');}}();xhr.onreadystatechange = function () {if(xhr.readyState === 4 && xhr.status === 200){var res = JSON.parse(xhr.responseText);// console.log(res.result);if (isInit === 1 && addressNum < thisStartId.length) {//初始化的时候循环请求数据getData(thisStartId[addressNum - 1], (addressNum + 1), thisStartName[addressNum],1);}setPages(res.result, areaId, addressNum, name, isInit);}};xhr.open('get', addressUrl);xhr.send(null);}

6:设置显示html,渲染页面,绑定相应的点击事件

    获取数据请求全部都是用原生方法请求,然后成功获取数据之后进行循环请求,然后渲染页面方法

         /***将数据渲染到当前列表的方法*@method setPages*@param data 获取到第addressNum列的数据*@param areaId 点选地址的areaid*@param addressNum yls_address是第几个*@param name 是点击选择的地址name*@param isInit 是点是初始化,1是初始化,0不是初始化**/function setPages(data, areaId, addressNum, name, isInit) {//转成数字,防止变成字符串addressNum = parseInt(addressNum);//转成数字,防止变成字符串isInit = parseInt(isInit);//声明变量以获得当前需要做处理的列表var current = 0;isInit === 1 ? current = addressNum : current = addressNum - 1;//获取当前需要渲染的地址列表var current_address = document.getElementById(ylsAd + current);//获取当前列表选中地址的顶部tab divvar current_topAddress = document.getElementById(ylsTopAd + current);if(isInit === 1){//是初始化页面if (addressNum === thisStartId.length) {//当渲染到最后一个列表的时候,添加上show,让他显示current_address.className = 'yls_address show';current_topAddress.className = 'show';}//当前标题tab上的name添加上去current_topAddress.innerHTML = name;//为每个标题tab设置属性current_topAddress.setAttribute('areaId', thisStartId[addressNum - 1]);//为每个标题tab添加点击事件current_topAddress.addEventListener("click", function () {//获取到id上最后一位数字,然后根据数字进行相应的隐藏显示操作var areaId = this.getAttribute('areaid');var id_no = parseInt(current);//循环进行判断添加显示for (var i = 1; i < 5; i++) {var top_id = 'yls_top_address_' + i;//获取到每一个顶部tab的idvar ad_id = 'yls_address_' + i;//获取到每一个列表address的iddocument.getElementById(top_id).removeAttribute('class');document.getElementById(ad_id).className = 'yls_address';if (i === id_no) {document.getElementById(top_id).className = 'show';document.getElementById(ad_id).className = 'yls_address show';}if (i > id_no) {document.getElementById(top_id).innerHTML = '';}}//更新数据,截取到前面几位thisStartId = thisStartId.slice(0, addressNum);thisStartName = thisStartName.slice(0, addressNum);// console.log(thisStartId);}, false);//清空列表html,拼接htmlcurrent_address.innerHTML = '';//拼接html添加到div中setHtmls(current_address,data,addressNum, isInit);}else{//不是初始化页面//获取到下一级渲染列表的divvar next_address = document.getElementById(ylsAd + addressNum);//获取到要下一级列表顶部的tab divvar next_topAddress = document.getElementById(ylsTopAd + addressNum);//下一级标题显示请选择next_topAddress.innerHTML='请选择';//下一级标题添加红色样式next_topAddress.className='show';//当前标题去除红色样式current_topAddress.removeAttribute('class');//当前列表去除显示样式current_address.className = 'yls_address';//下一级列表添加显示样式next_address.className ='yls_address show';//下一级列表情况next_address.innerHTML = '';//拼接html添加到div中setHtmls(next_address,data,addressNum, isInit);}}/***拼接html,添加到div中,并且绑定点击事件*@method setHtmls*@param data 获取到第addressNum列的数据*@param faEle 需要添加html的列表div*@param addressNum yls_address是第几个*@param isInit 是点是初始化,1是初始化,0不是初始化*/function setHtmls(faEle, data, addressNum, isInit) {//拼接htmlvar html = '';if (data) {for (var i = 0; i < data.length; i++) {if ((thisStartName[addressNum - 1] === data[i].name) && isInit === 1) {html += '<p class="p_show" id="add_' + data[i].areaId + '"  addressNum="' + addressNum + '" areaId="'+data[i].areaId+'">' + data[i].name + '</p>';}else{html += '<p id="add_' + data[i].areaId + '"  addressNum="' + addressNum + '" areaId="'+data[i].areaId+'">' + data[i].name + '</p>';}}faEle.innerHTML = html;}//绑定点击事件var allP = faEle.getElementsByTagName('p');for (var j = 0; j < allP.length; j++) {allP[j].addEventListener('click', chooseAddress, false)}}

7:实现点击地址列表中地址的方法

    与此同时在方法中要为各个点击区域添加上点击事件,相应的切换四级的点击事件和具体点击选择当前列表中地址的点击事件。之后就是详细写明点击选择地址的时候触发的事件了。

         /***点击列表中的地址触发的方法*@method chooseAddress**/function chooseAddress() {//获取现在点击的城市的idvar areaId = this.getAttribute('id').split('_')[1];//获取我点击地址在第几个列表中var addressNum = parseInt(this.getAttribute('addressNum'));//获取现在点击的城市的namevar name = this.innerHTML;//更新数据// console.log(parseInt(areaId));thisStartId[addressNum-1] = parseInt(areaId);thisStartName[addressNum-1] = name;//获取当前需要渲染的地址列表var current_address = document.getElementById(ylsAd + addressNum);//获取当前列表选中地址的顶部tab divvar current_topAddress = document.getElementById(ylsTopAd + addressNum);//移除当前列表中所有的标红样式,然后添加到新选择的上面var pEles = current_address.getElementsByTagName('p');//是否对应areaId,不等于的将样式移除for(var i=0;i<pEles.length;i++){if(thisStartId[addressNum-1] === parseInt(pEles[i].getAttribute('areaId'))){pEles[i].className = 'p_show';}else{pEles[i].removeAttribute('class');}}//当前顶部tab换成点选的地址current_topAddress.innerHTML=name;//判断是否是最后一个列表,如果是,就不用请求新的数据,如果不是,就请求新的数据。if(addressNum === 4){//将文字显示到页面上thisWrightHtml.innerHTML = thisStartName;_this.CityArr = thisStartName;_this.CityIdArr = thisStartId;hideAddress();setTimeout(function () {thisFn();},300)}else{//重新请求数据getData(areaId, (addressNum+1), name, 0);}}

    写的有点乱,下面我就把整个js放出来,大家要是觉得上面的乱,可以看下面一目了然的代码。

var yls_address = {run: function (details) {var _this = this;//初始化idvar thisStartId = details.startId;//初始化Namevar thisStartName = details.startName;//获取请求urlvar thisUrl = details.url || '';//获取回调方法var thisFn = details.fn || '';//获取最后需要显示地址信息的元素,可有可无的var thisWrightHtml = details.targetDom || '';//因为要经常获取元素,所以把前缀单独声明了var ylsAd =  'yls_address_';var ylsTopAd =  'yls_top_address_';//判断初始数据是否正确if (thisStartName.length === thisStartName.length) {initHtml();//初始化htmlgetData(0, 1, thisStartName[0],1);//获取数据} else {console.log('初始值出问题了');}//绑定关闭按钮方法document.getElementsByClassName('yls_address_pop_cancel')[0].addEventListener("click",hideAddress,false);document.getElementsByClassName('yls_address_bg')[0].addEventListener("click",hideAddress,false);/***初始化弹出框的html,去除一些样式*@method initHtml**/function initHtml() {//生成html添加到页面var thisInnerHtml = '<div class="yls_address_bg"></div>' +'<div class="yls_address_main">' +' <div class="yls_address_pop_top">' +'<div class="yls_address_pop_title">请选择地址</div>' +'<div class="yls_address_pop_cancel"></div>' +'</div>' +'<div class="yls_address_pop_main">' +'<div class="yls_address_product">' +'<div class="yls_address_select">' +'<div class="yls_address_top_address jdshop_alignment_middle">' +'<div id="yls_top_address_1">请选择</div>' +'<div id="yls_top_address_2"></div>' +'<div id="yls_top_address_3"></div>' +'<div id="yls_top_address_4"></div>' +'<div id="yls_top_address_5"></div>' +'</div>' +'<div class="yls_address" id="yls_address_1"></div>' +'<div class="yls_address" id="yls_address_2"></div>' +'<div class="yls_address" id="yls_address_3"></div>' +'<div class="yls_address" id="yls_address_4"></div>' +'<div class="yls_address" id="yls_address_5"></div>' +'</div></div></div></div>';addNode("div", thisInnerHtml, "yls_address_choose", '');for(var i = 1; i <= thisStartId.length;i++){//获取每个地址列表var ad = document.getElementById(ylsAd + i);//获取四个顶部选中的地址var topad = document.getElementById(ylsTopAd + i);//清空地址列表ad.innerHTML = '';//清空地址列表ad.className = 'yls_address';//初始化列表的样式topad.innerHTML = '';//清空选中地址的样式topad.removeAttribute('class');}}/***获取地址列表数据方法*@method getData*@param areaId 点选地址的areaid*@param addressNum yls_address是第几个*@param name 是点击选择的地址name*@param isInit 是点是初始化,1是初始化,0不是初始化*@return 返回值说明*/function getData(areaId, addressNum, name, isInit){addressNum = parseInt(addressNum);//转成数字,防止变成字符串isInit = parseInt(isInit);//转成数字,防止变成字符串var addressUrl = thisUrl + areaId;//请求数据var xhr = function () {if (window.XMLHttpRequest) {return new XMLHttpRequest();}else {return new ActiveObject('Micrsorf.XMLHttp');}}();xhr.onreadystatechange = function () {if(xhr.readyState === 4 && xhr.status === 200){var res = JSON.parse(xhr.responseText);// console.log(res.result);if (isInit === 1 && addressNum < thisStartId.length) {//初始化的时候循环请求数据getData(thisStartId[addressNum - 1], (addressNum + 1), thisStartName[addressNum],1);}setPages(res.result, areaId, addressNum, name, isInit);}};xhr.open('get', addressUrl);xhr.send(null);}/***将数据渲染到当前列表的方法*@method setPages*@param data 获取到第addressNum列的数据*@param areaId 点选地址的areaid*@param addressNum yls_address是第几个*@param name 是点击选择的地址name*@param isInit 是点是初始化,1是初始化,0不是初始化**/function setPages(data, areaId, addressNum, name, isInit) {//转成数字,防止变成字符串addressNum = parseInt(addressNum);//转成数字,防止变成字符串isInit = parseInt(isInit);//声明变量以获得当前需要做处理的列表var current = 0;isInit === 1 ? current = addressNum : current = addressNum - 1;//获取当前需要渲染的地址列表var current_address = document.getElementById(ylsAd + current);//获取当前列表选中地址的顶部tab divvar current_topAddress = document.getElementById(ylsTopAd + current);if(isInit === 1){//是初始化页面if (addressNum === thisStartId.length) {//当渲染到最后一个列表的时候,添加上show,让他显示current_address.className = 'yls_address show';current_topAddress.className = 'show';}//当前标题tab上的name添加上去current_topAddress.innerHTML = name;//为每个标题tab设置属性current_topAddress.setAttribute('areaId', thisStartId[addressNum - 1]);//为每个标题tab添加点击事件current_topAddress.addEventListener("click", function () {//获取到id上最后一位数字,然后根据数字进行相应的隐藏显示操作var areaId = this.getAttribute('areaid');var id_no = parseInt(current);//循环进行判断添加显示for (var i = 1; i < 5; i++) {var top_id = 'yls_top_address_' + i;//获取到每一个顶部tab的idvar ad_id = 'yls_address_' + i;//获取到每一个列表address的iddocument.getElementById(top_id).removeAttribute('class');document.getElementById(ad_id).className = 'yls_address';if (i === id_no) {document.getElementById(top_id).className = 'show';document.getElementById(ad_id).className = 'yls_address show';}if (i > id_no) {document.getElementById(top_id).innerHTML = '';}}//更新数据,截取到前面几位thisStartId = thisStartId.slice(0, addressNum);thisStartName = thisStartName.slice(0, addressNum);// console.log(thisStartId);}, false);//清空列表html,拼接htmlcurrent_address.innerHTML = '';//拼接html添加到div中setHtmls(current_address,data,addressNum, isInit);}else{//不是初始化页面//获取到下一级渲染列表的divvar next_address = document.getElementById(ylsAd + addressNum);//获取到要下一级列表顶部的tab divvar next_topAddress = document.getElementById(ylsTopAd + addressNum);//下一级标题显示请选择next_topAddress.innerHTML='请选择';//下一级标题添加红色样式next_topAddress.className='show';//当前标题去除红色样式current_topAddress.removeAttribute('class');//当前列表去除显示样式current_address.className = 'yls_address';//下一级列表添加显示样式next_address.className ='yls_address show';//下一级列表情况next_address.innerHTML = '';//拼接html添加到div中setHtmls(next_address,data,addressNum, isInit);}}/***拼接html,添加到div中,并且绑定点击事件*@method setHtmls*@param data 获取到第addressNum列的数据*@param faEle 需要添加html的列表div*@param addressNum yls_address是第几个*@param isInit 是点是初始化,1是初始化,0不是初始化*/function setHtmls(faEle, data, addressNum, isInit) {//拼接htmlvar html = '';if (data) {for (var i = 0; i < data.length; i++) {if ((thisStartName[addressNum - 1] === data[i].name) && isInit === 1) {html += '<p class="p_show" id="add_' + data[i].areaId + '"  addressNum="' + addressNum + '" areaId="'+data[i].areaId+'">' + data[i].name + '</p>';}else{html += '<p id="add_' + data[i].areaId + '"  addressNum="' + addressNum + '" areaId="'+data[i].areaId+'">' + data[i].name + '</p>';}}faEle.innerHTML = html;}//绑定点击事件var allP = faEle.getElementsByTagName('p');for (var j = 0; j < allP.length; j++) {allP[j].addEventListener('click', chooseAddress, false)}}/***点击列表中的地址触发的方法*@method chooseAddress**/function chooseAddress() {//获取现在点击的城市的idvar areaId = this.getAttribute('id').split('_')[1];//获取我点击地址在第几个列表中var addressNum = parseInt(this.getAttribute('addressNum'));//获取现在点击的城市的namevar name = this.innerHTML;//更新数据// console.log(parseInt(areaId));thisStartId[addressNum-1] = parseInt(areaId);thisStartName[addressNum-1] = name;//获取当前需要渲染的地址列表var current_address = document.getElementById(ylsAd + addressNum);//获取当前列表选中地址的顶部tab divvar current_topAddress = document.getElementById(ylsTopAd + addressNum);//移除当前列表中所有的标红样式,然后添加到新选择的上面var pEles = current_address.getElementsByTagName('p');//是否对应areaId,不等于的将样式移除for(var i=0;i<pEles.length;i++){if(thisStartId[addressNum-1] === parseInt(pEles[i].getAttribute('areaId'))){pEles[i].className = 'p_show';}else{pEles[i].removeAttribute('class');}}//当前顶部tab换成点选的地址current_topAddress.innerHTML=name;//判断是否是最后一个列表,如果是,就不用请求新的数据,如果不是,就请求新的数据。if(addressNum === 4){//将文字显示到页面上thisWrightHtml.innerHTML = thisStartName;_this.CityArr = thisStartName;_this.CityIdArr = thisStartId;hideAddress();setTimeout(function () {thisFn();},300)}else{//重新请求数据getData(areaId, (addressNum+1), name, 0);}}/***隐藏弹框*@method hideAddress**/function hideAddress() {remove(document.getElementById("yls_address_choose"));}/***为页面添加html*@method addNode*@param tag 标签*@param innerHtml 标签内html*@param id 标签id*@param className 标签样式**/function addNode(tag, innerHtml, id, className) {var obj = document.createElement(tag);if (id) {obj.id = id;}if(className){obj.className=className}obj.innerHTML = innerHtml;document.body.appendChild(obj);return obj;}/***将数据渲染到当前列表的方法*@method remove*@param _element 删除的元素**/function remove(_element) {var _parentElement = _element.parentNode;//找到父元素,然后删除if (_parentElement) {_parentElement.removeChild(_element);}}}
}

    以上就是所有的代码分解,其实总的来说难度比较低,在v1.0的版本下进行封装的话就更简单了,就是把一堆东西塞进一个方法里面。看着简单点,到时候写起来也简洁一点。

    调用方法在写js之前就写了,也很简单,就是把几个数据凑一块组成对象,塞进方法里面。当前2.0版本的代码还是有很多地方可以优化。不过暂时满足我项目需要,就不做太多的改动,之后要是有更新也不会更新到文章里面了。只会直接更新到github上了。

    还有就是目前这个弹框还有两个问题,一个是动效还没加,一个是没有去做蒙板弹出,滑动地址列表数据的时候,底层可能也会跟着一块滚动的问题,不过解决起来不难,要是真有兴趣看到这里的朋友可以自己试一试。当然,我估计应该没啥人能看到这里了。。

    同样,有什么问题可以留言讨论,大家一起进步。

    OVER!


http://www.ppmy.cn/news/898581.html

相关文章

【Ubuntu】docker配置harbor

为了让Docker能够与Harbor进行通信并推送/拉取镜像&#xff0c;你需要在Docker配置中添加Harbor的信息。具体而言&#xff0c;你需要在Docker守护进程的配置文件中指定Harbor的地址&#xff0c;并重启Docker服务使配置生效。 以下是配置Docker与Harbor集成的步骤&#xff1a; …

数据库,数据仓库,数据湖

数据仓库四层分层 ODS——原始数据层&#xff1a;存放原始数据 ODS层即操作数据存储&#xff0c;是最接近数据源中数据的一层&#xff0c;数据源中的数据&#xff0c;经过抽取、洗净、传输&#xff0c;也就说传说中的ETL之后&#xff0c;装入本层&#xff1b;一般来说ODS层的数…

笙默考试管理系统-MyExamTest(2)

笙默考试管理系统-MyExamTest&#xff08;2&#xff09; 目录 一、 笙默考试管理系统-MyExamTest 二、 笙默考试管理系统-MyExamTest 三、 笙默考试管理系统-MyExamTest 四、 笙默考试管理系统-MyExamTest 五、 笙默考试管理系统-MyExamTest 笙默考试管理系统-MyExam…

SpringBoot 使用前缀树实现敏感词过滤

文章目录 前缀树介绍节点初始化前缀树添加敏感词删除敏感词敏感词过滤代码实现 前缀树介绍 前缀树&#xff08;Trie&#xff09;&#xff0c;也称为字典树或前缀字典树&#xff0c;是一种特殊的多叉树数据结构。它用于高效地存储和检索字符串集合。以下是前缀树的常见数据结构…

b站视频播放三倍速

目录 一、操作 一、操作 document.querySelector(video).playbackRate 31、F12或者在当前界面鼠标右击选择检查 打开开发者工具平台 2、在console界面执行document.querySelector(video).playbackRate 3 document.querySelector(video).playbackRate 3

opencv实战--角度测量和二维码条形码识别

文章目录 前言一、鼠标点击的角度测量二、二维码条形码识别 前言 一、鼠标点击的角度测量 首先导入一个带有角度的照片 然后下面的代码注册了一个鼠标按下的回调函数&#xff0c; 还有一个点的数列&#xff0c;鼠标事件为按下的时候就记录点&#xff0c;并画出点&#xff0c;…

抓包工具QPA使用教程

1、QPA是基于进程的抓包软件&#xff0c;可以在获取的报文中&#xff0c;自行选择应用进程的报文。 下载官网&#xff1a;http://protocol.sinaapp.com/ 官网中有两个版本&#xff08;1&#xff09;开源的openQPA&#xff1a;https://gitee.com/l7dpi/openQPA &#xff08;2&am…

网络爬虫抓包工具

&#x1f4da;介绍&#xff1a;Charles是著名的抓包工具 &#x1f402;&#xff0c;可以抓取移动端与pc端网络访问 &#x1f577;的所有数据。我们将使用它抓取我们与小程序交互的所有信息。 &#x1f387;我们可以百度搜索Charles官网下载适用于自己系统的Charles安装包 &…

常用网络抓包工具推荐

因为发现好多人想抓包&#xff0c;但是不知道有哪些工具&#xff0c;今天我给大家推荐几款抓包工具&#xff0c;希望对大家有所帮助。 网络抓包工具的用途 网络抓包工具的主要功能是将网络执行的过程&#xff0c;详细的记录下来。如果你是一个程序员&#xff0c;肯定对网络抓…

网络协议和Netty(7):常用的网络抓包工具 Wireshark

目录 Wireshark的使用 1.下载 2.安装 数据包的捕获和基本用法 过滤器 捕获过滤器 捕获过滤器的 BPF 语法 显示过滤器 比较操作符和逻辑操作符 预定义过滤器 前言&#xff1a;前面三次握手和四次挥手用的抓包工具就是Wireshark&#xff0c;本节主要介绍其简单的使用&…

使用windows自带的网络命令工具抓包

1 使用windows自带的网络工具抓包 文章目录 1 使用windows自带的网络工具抓包1.1 windows下抓包过程1.2 抓包文件分析 在音视频领域&#xff0c;涉及到对接码流传输的各种问题&#xff0c;很多是通过抓包来定位&#xff0c;常用的抓包工具&#xff0c;windows下使用wireshark&a…

网络抓包工具 wireshark 入门教程

一、准备工作 Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换。所以需要先安装WinPcap_4_1_3.exe。 二、开始抓包 1.开始界面 2.wireshark是捕获机器上的某一块网卡的网络包,当机器上有多块网卡的时候,需要选择一个网卡。然后点击"Start"按钮, 开始…

ubuntu 发包和抓包工具的使用

一、介绍 发包工具&#xff1a;packEth 抓包工具&#xff1a;wireshark tcpdump 二、安装 1、安装packEth sudo apt-get install packeth 安装wireshark sudo apt install wireshark 安装tcpdump 二、使用 1、发包 ping命令 sudo packeth L2 Link layer&#xff0c;填写源…

linux下抓包工具 wireshark,网络抓包工具Wireshark下载安装使用详细教程

叮嘟!这里是小啊呜的学习课程资料整理。好记性不如烂笔头,今天也是努力进步的一天。一起加油进阶吧! 一、关于Wireshark Wireshark(前身 Ethereal)是一个网络包分析工具。该工具主要是用来捕获网络数据包,并自动解析数据包,为用户显示数据包的详细信息,供用户对数据包进行…

企业微信网络抓包工具devtools_resources

1.首先下载电脑版的企业微信&#xff0c;可用链接: 企业微信安装包wecom-网络监控文档类资源-CSDN下载1、企微调试更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_27821393/81872993 2.安装WXwork 3.将WXWork\3.1.15.3008\4.0.1326.400\de…

“黑客”必用兵器之“网络抓包工具”

“黑客”必用兵器之“网络抓包工具” 在之前的文章里讲到过网络通信原理、网络协议端口、漏洞扫描等网络相关知识&#xff0c;很多网友看到这些文章以后都说写的不错&#xff0c;但是阅读后感觉还是做不到深刻理解&#xff0c;今天我就教大家一个工具&#xff0c;有了这个工具…

抓包工具之fiddler

一 、Fiddler简介 1、 简介 Fiddler是位于客户端和服务器端之间的代理&#xff0c;也是目前最常用的抓包工具之一 。它能够记录客户端和服务器之间的所有请求&#xff0c;可以针对特定的请求&#xff0c;分析请求数据、设置断点、调试web应用、修改请求的数据&#xff0c;甚至…

一文带你掌握抓包工具的使用-科来

本篇彭老师将图文并茂教你如何使用抓包工具&#xff0c;并在文章最后教大家如何偷取FTP的用户名密码。 一、安装 一口君为大家介绍一个非常好用的抓包工具&#xff0c;科来。 下载地址&#xff1a; http://www.colasoft.com.cn/ 下载完毕&#xff0c;双击直接下一步即可安…

android的抓包工具,安卓抓包工具

我从事家庭ICT(家庭信息与通信技术)领域的技术工作,抓网络包是家常便饭。在此我推荐一款很好用的网络抓包工具:WireShark,大鲨鱼网络抓包工具。这个工具的获取可以在WireShark官网上直接下载,但是访问速度却十分缓慢,我网上搜了下可以直接在“腾讯软件中心”下载,你只需在…

ipv6抓包 tcpdump_网络抓包工具tcpdump图文教程

tcpdump工具可以将网络中传送的数据包完全截获下来提供分析。还支持网络层、协议、主机或端口的过滤,并提供and/or/not等逻辑语句来去掉无用的信息。通过本文可以熟悉TcpDump工具,对网络数据抓包不再难! 1、首先是在Linux系统上安装tcpdump,通过yum即可 yum install tcpdump…
最新文章