先上效果圖

{{province}} {{city}} {{county}}

選擇城市

取消

確定

{{sheng.name}}

{{item.name}}

{{item.name}}

/**index.wxss**/

page{

background-color: rgba(255, 255, 255, 1);

}

.infoText{

margin-top: 20rpx;

text-align: center;

width: 100%;

justify-content: center;

}

picker-view{

background-color: white;

padding: 0;

width: 100%;

height: 380rpx;

bottom: 0;

position: fixed;

}

picker-view-column view{

vertical-align:middle;

font-size: 28rpx;

line-height: 28rpx;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

/* ----------------------------------------- */

.animation-element-wrapper {

display: flex;

position: fixed;

left: 0;

top:0;

height: 100%;

width: 100%;

background-color: rgba(0, 0, 0, 0.6);

}

.animation-element {

display: flex;

position: fixed;

width: 100%;

height: 470rpx;

bottom: 0;

background-color: rgba(255, 255, 255, 1);

}

.animation-button {

margin-top: 20rpx;

top:20rpx;

width: 400rpx;

height: 100rpx;

line-height: 100rpx;

align-items:center;

}

text{

color: #999999;

display: inline-flex;

position: fixed;

margin-top: 20rpx;

height: 50rpx;

text-align: center;

line-height: 50rpx;

font-size: 34rpx;

font-family: Arial, Helvetica, sans-serif;

}

.left-bt{

left: 30rpx;

}

.right-bt {

right: 30rpx;

}

.line{

display: block;

position: fixed;

height: 1rpx;

width: 100%;

margin-top: 89rpx;

background-color: #eeeeee;

}

function getAreaInfo(callBack){

var str = [{"level":1,"name":"浙江省","pId":0,"id":1},{"level":2,"name":"杭州市","pId":1,"id":2},{"level":3,"name":"西湖區(qū)","pId":2,"id":4},{"level":4,"name":"翠苑街道","pId":4,"id":5},{"level":4,"name":"三墩鎮(zhèn)","pId":4,"id":7},{"level":3,"name":"江干區(qū)","pId":2,"id":8},{"level":3,"name":"拱墅區(qū)","pId":2,"id":9},{"level":4,"name":"凱旋街道","pId":8,"id":10},{"level":4,"name":"下沙街道","pId":8,"id":11},{"level":4,"name":"西溪街道","pId":4,"id":12},{"level":4,"name":"古蕩街道","pId":4,"id":13},{"level":4,"name":"小河街道","pId":9,"id":14},{"level":4,"name":"湖墅街道","pId":9,"id":15},{"level":4,"name":"上塘街道","pId":9,"id":16}];

callBack(str);

}

module.exports.getAreaInfo = getAreaInfo;

//index.js

//獲取應(yīng)用實例

// var app = getApp()

// var util = require('../../utils/util.js')

var area = require('../../utils/area.js')

var areaInfo = [];//所有省市區(qū)縣數(shù)據(jù)

var provinces = [];//省

var citys = [];//城市

var countys = [];//區(qū)縣

var index = [0, 0, 0];

var cellId;

var t = 0;

var show = false;

var moveY = 200;

Page({

data: {

show: show,

provinces: provinces,

citys: citys,

countys: countys,

value: [0, 0, 0]

},

//滑動事件

bindChange: function (e) {

var val = e.detail.value

// console.log(e)

//判斷滑動的是第幾個column

//若省份column做了滑動則定位到地級市和區(qū)縣第一位

if (index[0] != val[0]) {

val[1] = 0;

val[2] = 0;

getCityArr(val[0], this);//獲取地級市數(shù)據(jù)

getCountyInfo(val[0], val[1], this);//獲取區(qū)縣數(shù)據(jù)

} else { //若省份column未做滑動，地級市做了滑動則定位區(qū)縣第一位

if (index[1] != val[1]) {

val[2] = 0;

getCountyInfo(val[0], val[1], this);//獲取區(qū)縣數(shù)據(jù)

}

}

index = val;

console.log(index + " => " + val);

//更新數(shù)據(jù)

this.setData({

value: [val[0], val[1], val[2]],

province: provinces[val[0]].name,

city: citys[val[1]].name,

county: countys[val[2]].name

})

},

onLoad: function (options) {

cellId = options.cellId;

var that = this;

var date = new Date()

console.log(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日");

//獲取省市區(qū)縣數(shù)據(jù)

area.getAreaInfo(function (arr) {

console.log("arr"+arr)

areaInfo = arr;

//獲取省份數(shù)據(jù)

getProvinceData(that);

});

},

// ------------------- 分割線 --------------------

onReady: function () {

this.animation = wx.createAnimation({

transformOrigin: "50% 50%",

duration: 0,

timingFunction: "ease",

delay: 0

}

)

this.animation.translateY(200 + 'vh').step();

this.setData({

animation: this.animation.export(),

show: show

})

},

//移動按鈕點擊事件

translate: function (e) {

if (t == 0) {

moveY = 0;

show = false;

t = 1;

} else {

moveY = 200;

show = true;

t = 0;

}

// this.animation.translate(arr[0], arr[1]).step();

animationEvents(this,moveY, show);

},

//隱藏彈窗浮層

hiddenFloatView(e){

console.log(e);

moveY = 200;

show = true;

t = 0;

animationEvents(this,moveY, show);

},

//頁面滑至底部事件

onReachBottom: function () {

// Do something when page reach bottom.

},

})

//動畫事件

function animationEvents(that,moveY,show){

console.log("moveY:" + moveY + "\nshow:" + show);

that.animation = wx.createAnimation({

transformOrigin: "50% 50%",

duration: 400,

timingFunction: "ease",

delay: 0

}

)

that.animation.translateY(moveY + 'vh').step()

that.setData({

animation: that.animation.export(),

show: show

})

}

// ---------------- 分割線 ----------------

//獲取省份數(shù)據(jù)

function getProvinceData(that) {

var s;

provinces = [];

var num = 0;

for (var i = 0; i < areaInfo.length; i++) {

s = areaInfo[i];

if (s.level == "2") {

provinces[num] = s;

num++;

}

}

that.setData({

provinces: provinces

})

//初始化調(diào)一次

getCityArr(0, that);

getCountyInfo(0, 0, that);

// that.setData({

// province: "杭州市",

// city: "西湖區(qū)",

// county: "翠苑街道",

// })

}

// 獲取地級市數(shù)據(jù)

function getCityArr(count, that) {

var c;

citys = [];

var num = 0;

for (var i = 0; i < areaInfo.length; i++) {

c = areaInfo[i];

if (c.level == "3" && c.pId == provinces[count].id ) {

citys[num] = c;

num++;

}

}

if (citys.length == 0) {

citys[0] = { name: '' };

}

that.setData({

// city: "",

citys: citys,

value: [count, 0, 0]

})

}

// 獲取區(qū)縣數(shù)據(jù)

function getCountyInfo(column0, column1, that) {

var c;

countys = [];

var num = 0;

for (var i = 0; i < areaInfo.length; i++) {

c = areaInfo[i];

if (c.level == "4" && c.pId == citys[column1].id) {

countys[num] = c;

num++;

}

}

if(countys.length == 0){

countys[0] = {name:''};

}

that.setData({

// county: "",

countys: countys,

value: [column0, column1, 0]

})

}

JSONArray jar = new JSONArray();

List areas = areaMapper.findAllArea();

for (int i = 0; i < areas.size(); i++) {

JSONObject json = new JSONObject();

Area m = areas.get(i);

json.put("id", m.getAreaId());

json.put("pId", m.getParentId());

json.put("name", m.getAreaName());

json.put("level", m.getLevel());

jar.add(json);

}

鑒于微信小程序沒有三級級聯(lián)，所以自己做了一個三級。有些無用代碼沒有清掉，數(shù)據(jù)格式是從后來傳過來的。

歡迎指正

總結(jié)

以上是生活随笔為你收集整理的java生成三级级联的数据,微信小程序三级级联，自定义json数据源的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。