微信小程序實現(xiàn)省市區(qū)三級地址選擇
更新時間：2020年06月21日 09:20:23 作者：蝸牛專注學習
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)省市區(qū)三級地址選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
國際慣例先上效果圖：
省市區(qū)三級聯(lián)動，選擇省自動刷新市，選擇市自動刷新區(qū)，點擊取消自動返回上一級重新選擇，點擊確定，保存地址。
數(shù)據(jù)庫
這份數(shù)據(jù)庫是某天在網(wǎng)上逛到的，當時未記錄出處，直接貼出給讀者使用，實在不妥，此處僅貼出表結構，方便大家交流學習。如有讀者了解此份數(shù)據(jù)出處，煩請留言，謝謝！
數(shù)據(jù)表結構如下：
部分使用到的字段信息：
id：唯一標識每一個數(shù)據(jù)
name：地區(qū)名
parent_id：上級地區(qū)的id，若parent_id = 0 ，表示無上級信息，當前即為最高行政區(qū)。
extra：主要標識少數(shù)民族自治州或者自治縣的信息，如：巴音郭楞 蒙古 自治州，此處存儲 蒙古
例：
suffix:行政級別 市 省 縣 區(qū)等
部分地區(qū)數(shù)據(jù)信息如下：
后臺
后臺僅需提供一個接口，根據(jù)parent_id，查詢地區(qū)信息
此處使用的后臺是SSM框架，貼出主要接口、sql
1.與小程序交互接口
@RequestMapping(value = "/getArea", method = RequestMethod.POST)
private @ResponseBody
List<District> getArea(HttpServletRequest request) {
int parentId = Integer.parseInt(request.getParameter("parentId"));
logger.info("getArea");
List<District> list = new ArrayList<District>();
try {
list = districtService.getAreas(parentId);
} catch (Exception e) {
}
return list;
}
2.查詢sql
<select id="getAreas" resultType="District">
<!-- 具體的sql -->
SELECT
id,concat(name,extra,suffix) as name,parent_id as parentId
FROM
district
WHERE
parent_id = #{parentId}
</select>
前端
先貼出css：
.hotCity {
padding-right: 50rpx;
margin: auto;
}
.weui-grid {
padding: 10rpx 0;
width: 160rpx;
box-sizing: border-box;
border: 1rpx solid #ececec;
border-radius: 8rpx;
background-color: white;
margin: 8rpx 0;
}
.weui-grids {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.weui-grid__label {
display: block;
text-align: center;
color: #333;
font-size: 30rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.county {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
margin-left: 15px;
}
/** 頭部css **/
.headTitle{
display: flex;
}
.headButton{
background: #f68135;
border-radius: 25rpx;
border: 1px solid #f68135;
color: #fff;
height: 80rpx;
line-height: 80rpx;
margin: 0 auto;
width: 150rpx;
font-size: 45rpx;
text-align: center;
padding:0px;
vertical-align:middle ;
}
html
html僅由兩部分組成：
頭部：確定、取消按鈕，顯示當前選擇地址信息
確定取消主要綁定了兩個方法：submitChoose 及 cancleChoose 兩個方法，點擊不同按鈕，執(zhí)行不同js方法。
顯示當前地址信息：finalCity，只要在js中使用setData設置該值，該值就會動態(tài)改變。
city：顯示當前可選的地區(qū)
使用block組件，對json數(shù)組areaList進行循環(huán)顯示，同樣，使用setData設置該值，該值就會動態(tài)改變，達到省市區(qū)聯(lián)動選擇的效果。每一個小地區(qū)控件，有bindArea方法，并且在用戶選擇該地區(qū)，執(zhí)行bindArea方法時，使用data-數(shù)據(jù)名的方法，向后臺傳遞用戶選擇數(shù)據(jù)。
<view class="headTitle">
<button class="headButton" bindtap="cancleChoose">取消</button>
<view>{{finalCity == "" ? "請選擇地址" : finalCity}}</view>
<button class="headButton" bindtap="submitChoose">確定</button>
</view>
<view class="county">
<block class="hotCity" wx:for-items="{{areaList}}" wx:key="id">
<view class="weui-grid" style="margin-right: 16rpx;" data-parentId="{{item.parentId}}" data-id="{{item.id}}" data-city="{{item.name}}" bindtap="bindArea">
<view class="weui-grid__label">{{item.name}}</view>
</view>
</block>
</view>
js：
// pages/chooseCity/chooseCity.js
//獲取應用實例
const model = require('../cityChoose/cityChoose.js')
const config = require('../../utils/config.js')
const util = require('../../utils/util.js')
const app = getApp();
//記錄省市區(qū)
var nav = 0;
var chooseCity = new Array(3);
//記錄每一次的parentId
var finalParentId = new Array(3);
var flag = 0;
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
finalCity:"",
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
//parentId = 0 取所有省份數(shù)據(jù)
var that = this;
that.getData(0);
chooseCity = new Array("","","");
finalParentId = new Array(0,0,0);
nav = 0;
},
submitChoose:function(e){
if(flag != 1){
util.showLog("請選擇完整地址")
return;
}else{
var address_components = { "province": "", "city": "", "district": ""};
address_components["province"] = chooseCity[0];
address_components["city"] = chooseCity[1];
address_components["district"] = chooseCity[2];
console.log(address_components);
app.globalData.address_components = address_components;
wx.navigateBack();
}
},
cancleChoose:function(e){
console.log(finalParentId);
var that = this;
if(nav == 0){
wx.navigateBack();
} else {
nav = nav - 1;
chooseCity[nav] = "";
console.log(chooseCity);
that.setData({
finalCity: chooseCity[0] + chooseCity[1] + chooseCity[2]
})
that.getData(finalParentId[nav]);
}
},
bindArea: function(e) {
if(flag == 0){
console.log(e);
var that = this;
var parentId = e.currentTarget.dataset.id;
var city = e.currentTarget.dataset.city;
that.getData(parentId);
chooseCity[nav] = city;
finalParentId[nav] = e.currentTarget.dataset.parentid;
nav++;
console.log(chooseCity)
that.setData({
finalCity:chooseCity[0]+chooseCity[1]+chooseCity[2]
})
}
},
getData(parentId) {
var that = this;
var url = config.getArea + "?parentId=" + parentId;
wx.request({
url: url,
success: (res) => {
console.log("地區(qū)數(shù)據(jù)請求成功");
console.log(res)
if (res.data.length != 0) {
flag = 0;
//設置數(shù)據(jù)到全局變量
that.setData({
areaList: res.data,
});
}else{
//防止用戶再次點擊；
flag = 1;
}
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
fail: (res) => {
console.log("地區(qū)數(shù)據(jù)請求失敗");
}
})
},
})
js解析
全局變量作用：
//記錄用戶已選擇層次
var nav = 0;
//記錄省市區(qū)三級數(shù)據(jù)
var chooseCity = new Array(3);
//記錄每一次的parentId，主要記錄用戶選擇路徑，取消時根據(jù)用戶路徑顯示上一級數(shù)據(jù)
var finalParentId = new Array(3);
//記錄是否已經(jīng)到最底層，再無數(shù)據(jù)可以選擇
var flag = 0;
執(zhí)行過程：
進入頁面執(zhí)行onLoad生命周期函數(shù)，在onLoad中調(diào)用getData初始化數(shù)據(jù)，及默認顯示行政級別為省的數(shù)據(jù)，即請求parent_id為0的數(shù)據(jù)
getData：
getData(parentId) {
var that = this;
//請求的url，由后臺決定，此處填入你的請求url即可
var url = config.getArea + "?parentId=" + parentId;
wx.request({
url: url,
success: (res) => {
console.log("地區(qū)數(shù)據(jù)請求成功");
console.log(res)
if (res.data.length != 0) {
flag = 0;
//設置數(shù)據(jù)到全局變量
that.setData({
areaList: res.data,
});
}else{
//已到最后一層數(shù)據(jù)
flag = 1;
}
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
fail: (res) => {
console.log("地區(qū)數(shù)據(jù)請求失敗");
}
})
},
點擊地區(qū)數(shù)據(jù)執(zhí)行bindArea
bindArea: function(e) {
//如果未到最后一層，即可向下執(zhí)行
if(flag == 0){
console.log(e);
var that = this;
//獲取html傳參，獲取用戶點擊信息
var parentId = e.currentTarget.dataset.id;
var city = e.currentTarget.dataset.city;
//根據(jù)用戶點擊的數(shù)據(jù)，傳入當前的id作為下一層的parentId，請求下一層數(shù)據(jù)，
that.getData(parentId);
//記錄用戶選擇
chooseCity[nav] = city;
//用戶點擊取消，到此層時，需要使用當前的parientid來請求此層應顯示的數(shù)據(jù)
finalParentId[nav] = e.currentTarget.dataset.parentid;
//記錄路徑數(shù)+1
nav++;
console.log(chooseCity)
//更新用戶選擇地區(qū)顯示
that.setData({
finalCity:chooseCity[0]+chooseCity[1]+chooseCity[2]
})
}
},
點擊取消，執(zhí)行方法cancleChoose
cancleChoose:function(e){
var that = this;
//已是最后一層，則返回上一頁
if(nav == 0){
wx.navigateBack();
} else {
//記錄路徑數(shù)-1
nav = nav - 1;
//將上次已選擇的地區(qū)清空
chooseCity[nav] = "";
console.log(chooseCity);
//更新選擇數(shù)據(jù)
that.setData({
finalCity: chooseCity[0] + chooseCity[1] + chooseCity[2]
})
//根據(jù)finalParent中記錄的每一層應請求的數(shù)據(jù)來更新地區(qū)數(shù)據(jù)
that.getData(finalParentId[nav]);
}
},
點擊確定，執(zhí)行方法submitChoose
submitChoose:function(e){
//如果未到最后一層，表示地址未選擇完，如果不需要選擇完整地址，此處去掉即可
if(flag != 1){
util.showLog("請選擇完整地址")
return;
}else{
//存儲數(shù)據(jù)到全局變量中，采用了json的方式存儲，可以分別存儲省市區(qū)數(shù)據(jù)
var address_components = { "province": "", "city": "", "district": ""};
address_components["province"] = chooseCity[0];
address_components["city"] = chooseCity[1];
address_components["district"] = chooseCity[2];
console.log(address_components);
app.globalData.address_components = address_components;
//返回上一次頁面
wx.navigateBack();
}
},
謝謝大家查看，評論里希望貼出cityChoose.js 及 util.js ，在下面貼出來啦，注：util.js里不是所有方法都要用到。
希望能夠幫助到大家。
cityChoose
// pages/chooseCity/chooseCity.js
//獲取應用實例
const model = require('../cityChoose/cityChoose.js')
const config = require('../../utils/config.js')
const util = require('../../utils/util.js')
const app = getApp();
//記錄省市區(qū)
var nav = 0;
var chooseCity = new Array(3);
//記錄每一次的parentId
var finalParentId = new Array(3);
//記錄是否到最后一級
var flag = 0;
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
finalCity:"",
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
//parentId = 0 取所有省份數(shù)據(jù)
var that = this;
that.getData(0);
chooseCity = new Array("","","");
finalParentId = new Array(0,0,0);
nav = 0;
},
submitChoose:function(e){
if(flag != 1){
util.showLog("請選擇完整地址")
return;
}else{
var address_components = { "province": "", "city": "", "district": ""};
address_components["province"] = chooseCity[0];
address_components["city"] = chooseCity[1];
address_components["district"] = chooseCity[2];
console.log(address_components);
app.globalData.address_components = address_components;
wx.navigateBack();
}
},
cancleChoose:function(e){
console.log(finalParentId);
var that = this;
if(nav == 0){
wx.navigateBack();
} else {
nav = nav - 1;
chooseCity[nav] = "";
console.log(chooseCity);
that.setData({
finalCity: chooseCity[0] + chooseCity[1] + chooseCity[2]
})
that.getData(finalParentId[nav]);
}
},
bindArea: function(e) {
if(flag == 0){
console.log(e);
var that = this;
var parentId = e.currentTarget.dataset.id;
var city = e.currentTarget.dataset.city;
//刷新出下一級地址前重復點擊
console.log(chooseCity[nav - 1] );
console.log(city);
if(chooseCity[nav-1] == city){
return;
}
that.getData(parentId);
chooseCity[nav] = city;
finalParentId[nav] = e.currentTarget.dataset.parentid;
nav++;
console.log(chooseCity)
that.setData({
finalCity:chooseCity[0]+chooseCity[1]+chooseCity[2]
})
}
},
getData(parentId) {
var that = this;
var url = config.getArea + "?parentId=" + parentId;
wx.request({
url: url,
success: (res) => {
console.log("地區(qū)數(shù)據(jù)請求成功");
console.log(res)
if (res.data.length != 0) {
flag = 0;
//設置數(shù)據(jù)到全局變量
that.setData({
areaList: res.data,
});
}else{
//防止用戶再次點擊；
flag = 1;
}
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
fail: (res) => {
console.log("地區(qū)數(shù)據(jù)請求失敗");
}
})
},
})
util.js
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
function showLog(e) {
wx.showToast({
title: e,
icon: "none"
})
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function showLoading() {
wx.showLoading({
title: '加載中',
mask: true
})
}
// 驗證碼倒計時
function phone_code(t, second) {
// t是this,second是重新發(fā)送的間隔時間,需要設置按鈕可點擊
var s = second;
// 避免重復點擊
t.setData({
phone_code_text: s + "s",
phone_code_class: "",
phone_code_buff: true
});
// 倒計時
var clock = setInterval(function () {
if (s > 1) {
t.setData({
phone_code_text: --s + "s"
})
} else {
clearInterval(clock);
t.setData({
phone_code_text: "重新發(fā)送",
phone_code_class: "on",
phone_code_buff: false
});
// 重置數(shù)據(jù)
s = second;
}
}, 1000)
}
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
function checkAndCall(sourceId,recordType,tele,app,config){
console.log(app.globalData.haulUserInfo)
console.log(tele);
if (app.globalData.haulUserInfo == null) {
showLog("正在獲取用戶數(shù)據(jù)，請稍后。")
app.Promise.then(function (value) {
console.log(value);
if (value) {
// success
wx.makePhoneCall({
phoneNumber: tele,
success: ph => {
mycall(config, app,recordType, sourceId, function () {
//記錄聯(lián)系次數(shù)
})
}
})
} else {
// failure
showLog("注冊完成即可聯(lián)系" + "。。。即將跳轉")
setTimeout(function () {
wx.navigateTo({
url: '../registUser/registUser',
})
}, 1000);
}
}).catch(function (error) {
});
} else {
// success
wx.makePhoneCall({
phoneNumber: tele,
success: ph => {
mycall(config,app, recordType, sourceId,function () {
//記錄聯(lián)系次數(shù)
})
}
})
}
}
//記錄互相聯(lián)系
function mycall(config,app, recordType, sourceId, callback) {
console.log(typeof (recordType))
var that = this;
wx.request({
url: config.insertRecord,
method: "POST",
data: {
sourceId: sourceId,
userId: app.globalData.haulUserInfo.id,
recordType: recordType
},
header: {
"content-type": "application/x-www-form-urlencoded",
},
success: res => {
if (res.data.success) {
console.log('聯(lián)系成功');
callback();
} else {
showLog(res.data.error);
}
}
})
}
module.exports = {
formatNumber: formatNumber,
formatTime: formatTime,
phone_code_clock: phone_code,
showLoading: showLoading,
showLog: showLog,
getNowFormatDate: getNowFormatDate,
trim: trim,
mycall: mycall,
checkAndCall: checkAndCall
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vscode工具函數(shù)idGenerator使用深度解析
這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題
本文主要介紹了小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了JavaScript邏輯And運算符，在JavaScript中，邏輯 AND 運算符用雙和號（&&）表示2015-12-12
JavaScript圣杯布局與雙飛翼布局實現(xiàn)案例詳解
這篇文章主要介紹了JavaScript圣杯布局與雙飛翼布局實現(xiàn)案例，這是前端面試中需要掌握的知識點，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要給大家介紹了如何使用uniapp解決token值無法使用的問題,文中給大家詳細介紹了產(chǎn)生原因和解決方案,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-10-10
本篇主要簡單介紹了knockoutjs中最重要的概念：可觀察對象（數(shù)組）。非常不錯具有參考借鑒價值，感興趣的朋友快來圍觀吧2016-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)彈幕飛機效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細介紹了小程序實現(xiàn)圖片裁剪上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要和大家談一談bootstrap響應式布局，本教程講解如何在網(wǎng)頁布局中應用響應式設計，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了js實現(xiàn)模擬計算器退格鍵刪除文字效果的方法,涉及javascript字符串截取操作的相關技巧,需要的朋友可以參考下2015-05-05