Vue uniapp省份城市列表选择、省市选择

Vue uniapp省份城市列表选择、省市选择，uni-popup弹出自定义列表选择，非select选择器

htmlcss、jquery 自定义下拉选择、更多选择、时间选择项自定义_哆啦唉m的博客-CSDN博客html5+css3+jqueryhtmlcss、jquery 自定义下拉选择仿select下拉选择、自定义多选、更多选择、时间选择项自定义附demo全部代码https://blog.csdn.net/qq_33791597/article/details/125652483

<template><view class="content"><uni-collapse style='width: 30%; ' @change="popupOpen()"><uni-collapse-item :title="cityName" :open="true"></uni-collapse-item></uni-collapse><uni-popup @maskClick='popupClose()' ref="popupName" type="bottom" height='1' background-color="#fff"><uni-row class="demo-uni-row"><uni-col><view class="demo-uni-col"style="text-align: center; height: 100rpx; line-height:100rpx ; font-size: 25rpx;"><uni-icons type="location" color='#194eff' size="18"></uni-icons>{{barText}}</view></uni-col></uni-row><view style="height: 1000rpx;  background-color: #F7F7F7;"><view style="width: 35%; height: 100%; float: left;  "><uni-list style='border: none;'><uni-list-item :title="item.name" ellipsis=2 v-for="(item,index) in listA" :key="index"clickable='true' :style="{ backgroundColor: checkedIndex==index?'#ffffff ':'#f3f3f3',                           color: checkedIndex==index?'#55ffff':'#55aa00'
}" @click='provinceClick(index,item)'></uni-list-item></uni-list></view><view style="width: 65%; height: 100%;  float: left;  "><uni-list><uni-list-item :border='false' clickable='true' title="全部" @click='cityClick(null)'></uni-list-item><uni-list-item :border='false' clickable='true' ellipsis=2 :title="item.name"v-for="(item,index) in listB" @click='cityClick(item)' :key="index"></uni-list-item></uni-list></view></view></uni-popup></view>
</template>
<script>export default {data() {return {//省份城市数据listA: [{id: 0,name: '全部',data: []}, {id: 1,name: '安徽省',data: [{id: 1,name: '合肥市'}, {id: 2,name: '芜湖市'}]}, {id: 2,name: '江苏省',data: [{id: 1,name: '南京市'}, {id: 2,name: '苏州市'}]}, {id: 3,name: '浙江省',data: [{id: 1,name: '杭州市'}, {id: 2,name: '宁波市'}]}],//选择的省份的下面的城市数据listB: [],checkedIndex: 0, //选择的省份索引barText: '暂时无法获取您的位置，请先点击获取位置',provinceID: 0, //选择的省份IDprovinceName: 0, //选择的省份名称cityID: 0, //选择的城市IDcityName: 0, //选择的城市名称}},methods: {//省份选择事件provinceClick(index, item) {this.provinceID = item.id; //选择的省份IDthis.provinceName = item.name; //选择的省份IDthis.checkedIndex = index;this.listB = this.listA[index].data;},//城市选择事件cityClick(item) {if (item == null) { //全部this.cityID = 0; //选择的城市IDthis.cityName = '全部'; //选择的城市名称} else {this.cityID = item.id; //选择的城市IDthis.cityName = item.name; //选择的城市名称}uni.showToast({title: this.provinceName + this.cityName,duration: 2000});//选中城市并且关闭；this.$refs.popupName.close();},//popup 打开popupOpen() {this.$refs.popupName.open('bottom')},//popup遮罩层关闭事件popupClose() {uni.showToast({title: '关闭事件',duration: 2000});},}}
</script>

Vue uniapp省份城市列表选择、省市选择相关推荐

百度地图api使用城市列表组件选择城市、省份获取对应城市信息（省市经纬度）
文章目录前言一.核心代码二.可能遇到的问题 1.关于百度地图相关变量报错的问题报错: TS2552: Cannot find name 'BMap'. Did you mean 'Map'? ...
uni-app 选择城市（城市列表选择）
一.效果图二.getCity.vue <template><view class="main-Location">& ...
uni-app - 城市选择索引列表 / 通过 A-Z 排序的城市列表（uview 组件库 IndexList 索引列表）
前言由于考虑到各端平台兼容性及其代码健壮性(无BUG),故采用 uview 组件库的 IndexList 索引列表组件作为 "底层" 支持,在此基础上二次封装,可靠性及稳定性毋 ...
Android学习之省份城市县区选择+向上一级活动返回数据
json数据使用的是郭霖大神的json数据:http://guolin.tech/api/china/ 连网权限 <uses-permission android:name="andr ...
中国省份城市级联选择--JavaScript
原文地址为: 中国省份城市级联选择--JavaScript 前一段做了一个小程序居然都用到列表框选择城市,一直都是在里面直接编辑项,这样没做一次都要写那么多的城市名,真是让人有崩溃的冲动,网上也有很多 ...
[RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)
全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题实现效果如图: 代码实现如图: 主逻辑文件 cityList.js ...
仿美团实现地域选择和城市列表
介绍在开发O2O相关应用的时候,肯定会有定位,选择所在城市,选择地域,然后再向服务器请求该地区的相关数据,这时就需要我们提供一个导向让用户选择所在区域. 看来看去,最终还是选择模仿美团,感觉用户体验 ...
html城市手机搜索,原生js实现html手机端城市列表索引选择城市
本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下 html部分: 定位城市上海市 css部分: *{ margin: 0; padding: 0; list ...
jquery省份城市联动选择下拉框
<script type="text/javascript" src="__PUBLIC__/Medidata/js/jquery-1.8.3.min.js&quo ...
Android 城市列表选择
最近开发一个城市选择的功能,找了这个文章 Android 城市列表选择结果发现它使用的拼音转换库pinyin4j有一个很严重的问题,竟然长沙chang sha识别为zhang sha,结果长沙北分在 ...

Vue uniapp省份城市列表选择、省市选择

Vue uniapp省份城市列表选择、省市选择相关推荐

最新文章

热门文章