首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【愚公系列】2022年08月 微信小程序-省市区三联动功能实现

文章目录 前言 一、picker选择器 二、js滚动选择器实现 1.组件封装 2.使用 3.效果 三、wxs滚动选择器实现 1.组件封装 2.使用 3.效果 四、相关组件pop-up四件套 ---...- 前言 多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例。...多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果,有助于增强对数据处理的能力。 数据可以是后台从数据库读出来的数据,也可以是在JS里直接写的数据。...滚动选择器实现 1.组件封装 city.js相关json数据链接:https://download.csdn.net/download/aa2528877987/86504988 组件index四件套...this.setData({ value: [provinceNum, cityNum, areaNum] }) } }, preventTouchmove() {}, // 城市选择器

3.3K20

php学习之css选择器(二)

1.标准选择器:通配符选择器、标记选择器、类选择器、id选择器 通配符选择器 语法:*{color:red;} 注意:通配符是选择上所有的标记,。...id选择器 说明:每个html标记都有一个公共的属性id,每个id必须时唯一的 语法:#id 的值{color:red;} 注意:id选择器只是给一个标记加样式,一般用js的动态效果使用,id和class...时分开使用的,id给js使用,class给css使用 案例: ?...2.复杂选择器:多元素选择器、后代选择器、子类选择器、伪类选择器 多元素选择器: 说明:把css的基本选择器进行组合,组合成多种选择器方式 语法:div,ul,li,.class,#id,{color...后代选择器: 说明:在制作网站时会出现嵌套的形式,有可能时多级嵌套,而且每个多级里面标记还相同,这个时候就可以用某个标记中的某个内容 语法:第一层  第二层   第三层。。。。

1.1K51

从0到1搭建web三维智慧城市基础要素,three.js+mapbox智慧城市

首先明确最终web三维智慧城市的形态,在最近的项目中,我们接触到了一个县级城市的web三维城市可视化。1、选择合适的web三维引擎该县级城市的最大特点:山脉较多,主城区面积不大。...基于这个特点我们选用的引擎是mapbox+three.js,mapbox自带地形,渐进式渲染,山脉搭配主城区建筑物,整个势就起来了。...如果不涉及大范围地形,只用three.js即可,mapbox也会消耗点显卡资源。2、准备web三维城市中的要素这里列出部分要素,可以看到,很多重要的要素都来自geobuilding工具生产。...视频融合场景坐标(geobuilding)6、巡逻车跟踪镜头线(geobuilding)7、核酸事件场景,椭圆镜头环绕线,高速口-医院-疾控中心-政府(geobuilding)8、点位标记(three.js...)9、大事件飞线(three.js)10、精模小区模型(three.js)11、小范围实景三维3dtile(three.js)12、网格围栏(three.js)...3、使用geobuilding生产三维要素图片生产的车流线图片飞鸟线图片网格数据图片视频融合图片椭圆镜头环绕图片原有主城区建筑物数据图片

3.3K30

jQuery开发补充笔记

写更少的代码,做更多的事情: write Less ,Do more 将我们页面的JS代码和HTML页面代码进行分离 提高我们的工作效率,轻松的进行前端开发 JQuery中的选择器: 基本选择器 ID选择器...开头 .类名 元素选择器: 标签的名称 通配符选择器: * 选择器,选择器: 选择器1,选择器2 层级选择器 子元素选择器: 选择器1 > 选择器2 后代选择器: 选择器1 儿孙 相邻兄弟选择器: 选择器...1 + 选择器2 : 找出紧挨着的一个弟弟 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟 属性选择器: 选择器[href][title] : 多个属性 选择器[href][title=’test...使用JQ完成省市联动效果 需求分析: 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析: 准备工作 : 城市信息的数据 添加节点...; } //清空城市select中的option /*var $city = $("#city"); //将JQ对象转成JS对象进行清空

4.7K20

jQuery开发补充笔记

写更少的代码,做更多的事情: write Less ,Do more 将我们页面的JS代码和HTML页面代码进行分离 提高我们的工作效率,轻松的进行前端开发 JQuery中的选择器: 基本选择器 ID选择器...开头 .类名 元素选择器: 标签的名称 通配符选择器: * 选择器,选择器: 选择器1,选择器2 层级选择器 子元素选择器: 选择器1 > 选择器2 后代选择器: 选择器1 儿孙 相邻兄弟选择器...: 选择器1 + 选择器2 : 找出紧挨着的一个弟弟 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟 属性选择器: 选择器[href][title] : 多个属性 选择器[href][title...使用JQ完成省市联动效果 需求分析: 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析: 准备工作 : 城市信息的数据 添加节点...; } //清空城市select中的option /*var $city = $("#city"); //将JQ对象转成JS对象进行清空

1.6K30

微信小程序的省市选择组件 citySelector分享

省份/城市/区县定位选择器 :dash::rocket: 微信小程序,一行代码引入的省份/城市/区县定位选择器的库 主要功能 自动定位 城市、区县(也支持手动重新定位) 手动 汉字、拼音搜索 城市,支持搜索数量...335个,覆盖地级市 亦可通过 侧边栏 选择,城市按拼音首字母排列 选择好城市后,自动显示 辖下区县 集成说明 将libs文件夹拷贝至您的小程序项目根目录 在您的项目根目录 app.json 里的 pages...数组里增加一行 "libs/citySelector/switchcity/switchcity" 打开项目里的 /libs/citySelector/config.default.js 文件 将其中的...key改为自己的腾讯地图key(申请快速并免费) 点击立即打开腾讯地图Key申请页面 快速使用 在您要打开选择器地方用navigator组件,将url设置为 "/libs/citySelector/switchcity.../switchcity" 或者,在 JS 代码里直接使用 wx.navigateTo 打开地区选择器 wx.navigateTo({ url: '/libs/citySelector/switchcity

5.7K70

js与jQuery的区别以及jQuery选择器和方法的使用

目录 使用jQuery js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 使用jQuery jQuery...是什么:jQuery是JavaScript的类库,封装了很多js代码。...官网:http://jquery.com/ 为什么要学jQuery:可以简化JavaScript开发,jQuery中包含有:选择器,CSS样式,HTML事件处理,JS动画 以及丰富的插件等等,而且浏览器兼容性很高...文件夹中 4、引入jQuery库文件: 注意:script标签中不要写内容,写jQuery代码就再写一对script标签 js与jQuery代码对比 案例1:点击按钮获取文本框中的值(JS对比jQuery...),如下图 JS版: jQuery版: 先引入jQuery库 jQuery选择器:用来选中元素         1.1基本选择器         1.2层次选择器         1.3过滤选择器

15.4K10

jQuery的使用

/img/registImg.jpg" id="img1" /> 6.总结 6.1 jquery的选择器 基本选择器 id选择器:$(“#id名称”); 元素选择器...2.技术分析 需要使用jquery的选择器(基本选择器、基本过滤选择器) 还需要使用jquery的CSS的方法(css(name,value)) 如果CSS样式已经由美工写好,此时可以使用jquery的...2.技术分析 需要使用jquery的选择器(id选择器、类选择器) 需要使用jquery的属性操作方法 prop() 3.步骤分析 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件...第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】 第四步:接着遍历数组中的城市 第五步:创建一个城市文本节点 第六步:创建option元素节点 第七步:将文本节点添加到元素节点中.../js/jquery-1.8.3.js" > $(function(){ //2.创建二维数组用于存储省份和城市 var cities = new Array

8.2K31
领券