钉钉小程序-三级联动选择地区组件

钉钉小程序三级联动
上次发布的钉钉小程序三级联动，在真机上测试不管用，自己写了个组件
1.select.axml

<view class="scroll-item">
	<view class="xuan_top">
		<view a:for="{{ list_type }}" data-city="{{item.num}}" class="{{ xuan == index ? 'active' : '' }}" a:if="{{ xuan >= index }}" data-type = "{{index}}" onTap="nav_typ">
			{{item.text}}
		</view>
	</view>
	<scroll-view scroll-y="{{true}}" class="xuan_bottom" scroll-top="{{ backTop }}">
		<view class="view" a:for="{{list1}}" onTap="citys" data-text="{{item.name}}" data-index="{{  index }}">{{item.name}}</view>
	</scroll-view>
</view>

2.select.acss

.scroll-item{
	width: 100%;
	background-color: #fff;
	padding-top: 20rpx;
}
.xuan_top{
	display: flex;
	padding-left: 20rpx;
}
.xuan_top view{
	display: flex;
	align-items: center;
	justify-content: center;
margin-right: 20rpx;
	height: 80rpx;
}
.xuan_top .active{
	color: #1890ff;
	border-bottom: 4rpx #1890ff solid;
}
.xuan_bottom{
	height: 500rpx;
	margin-bottom: 50rpx;
}
.xuan_bottom .view	{
	height: 80rpx;
	display: flex;
	align-items: center;
	border-bottom: 2rpx #ccc solid;
	padding-left: 20rpx;
}

3.select.js ,引入上个文章中的citysJSON.js 链接：https://editor.youkuaiyun.com/md/?articleId=119110208

const citysJSON = require('/util/citysJSON.js');//引入之前的citysJSON.js
Component({
	mixins: [],
	data: {
		list:citysJSON.citys,
		list1:citysJSON.citys,
		xuan: 0,
		list_type:[
			{
				text:"请选择",
				num:0
			},
			{
				text:"请选择
				num:0
			},
			{
				text:"请选择",
				num:0
			},
			{
				text:"请选择",
				num:0
			}
		],
		list_type1:[
			{
				text:"请选择",
				num:0
			},
			{
				text:"请选择",
				num:0
			},
			{
				text:"请选择",
				num:0
			}
		],
		show:true,
		backTop:0
	},
	props: {
		onGetName: () => {}, // 父级传值的方法
	},
	methods: {
		nav_type(e){
			var type = e.currentTarget.dataset.type;//获取选择导航的index
			let backTop = this.data.backTop === 0 ? -1 : 0;	// 设置活的scroll-top值
			//点第一个选项时，导航数据恢复如初
			if(type == 0){
				this.setData({
					list_type: this.data.list_type1,
				})
			}else{
				//点其他选项时，导航内容单个恢复
				this.setData({
					['list_type[' + type + '].text']:"请选择",
					['list_type[' + type + '].num']:0 //点第一个选项时，导航存的地址index单个恢复
				})
			}
			this.setData({
				xuan: type,//设置选择导航的index，状态
				backTop: backTop// 修改scroll-top值
			})
			// 换地址数据内容
			this.ciyt_type()
		},
		citys(e){
			let backTop = this.data.backTop === 0 ? -1 : 0;	// 活的scroll-top值，点击地区回到顶部
			var text = e.currentTarget.dataset.text;// 获取选择地址文字
			var index = e.currentTarget.dataset.index;// 获取选择地址index
			// 状态小于导航数量时
			if(this.data.xuan < this.data.list_type.length){
				this.setData({
					['list_type[' + this.data.xuan + '].text']:text,// 修改选择器地址文字
					['list_type[' + this.data.xuan + '].num']:index,// 修改选择器地址index
					xuan: this.data.xuan + 1,// 修改选择器状态，样式
					backTop: backTop// 修改scroll-top值
				})
			}
			// 状态等于导航数量时，弹框隐藏
			if(this.data.xuan == this.data.list_type.length){
				this.setData({
					['list_type[2].text']:text[0],//最后区的是数组
				})
				this.props.onGetName({
					select_city: this.data.list_type
				})
				this.setData({
					list_type: this.data.list_type1,
					xuan:0
				})
			}
			// 换地址数据内容
			this.ciyt_type()
		},
		// 换地址数据内容
		ciyt_type(){
			// 获取存的地址index，获取每个市区的数据
			var num1 = this.data.list_type[0].num
			var num2 = this.data.list_type[1].num
			if(this.data.xuan == 0){
				var list_1 = this.data.list
			}
			if(this.data.xuan == 1){
				var list_1 = this.data.list[num1].subList
			}
			if(this.data.xuan == 2){
				var list_1 = this.data.list[num1].subList[num2].subList
			}
			// 修改联动下个市区的数据
			this.setData({
				list1: list_1
			})
		}
	},
});

4.select.json

{
	"component": true
}

页面引入

1. index.json

"usingComponents": {
	"select": "/page/component/select/select"
}

2. index.axml

<select onGetName="onGetcity"></select>

3. index.js

onGetcity(e){
	console.log(e.select_city)
}