可选择任意一级，如图：
级联.gif
未写递归，目前只可选择3级级联。
原来小程序实现不了组件循环调用！！！！！！！
记录：
20200327解决弹窗显示之后屏幕还可以滚动问题。解决：在遮罩层外的view标签上添加catchtouchmove="preventTouchMove"即可。
20200410优化样式显示，有下级的时候才显示列表
<template>
<div>
<view class="input_conter" @click="showCascader">
<view>级联选择器:<input placeholder="请选择级联" :value="value" disabled="true"/></view>
</view>
<view :hidden="isShowCascader" class="modal modal-bottom-dialog" catchtouchmove="preventTouchMove">
<!-- 遮罩层 -->
<view class="mask" @click="cancel"></view>
<view class="cascader">
<!-- 确定取消按钮 -->
<view class="cascader_header">
<button @click="cancel" class="cancal">取消</button>
<button @click="confirm" class="confirm">确定</button>
</view>
<!-- 列表 -->
<view class="scroll_box">
<scroll-view scroll-x class="scroll_x">
<view class="nav">
<!-- 一级 -->
<view style="width: 100%;">
<scroll-view scroll-y style="height: 300px;">
<radio-group class="radiobox_group" @change="radioChange1">
<view v-for="(item1, i) in options1" :key="i" class="border_bottom">
<text>{{ item1.label }}</text>
<radio :value="item1.value" :checked="item1.checked" color="#0099FF" class="radiobox"/>
</view>
</radio-group>
</scroll-view>
</view>
<!-- 二级 -->
<view style="width: 100%;background:#f8f8f8" :hidden="show1">
<scroll-view scroll-y style="height: 300px;">
<radio-group class="radiobox_group" @change="radioChange2">
<view v-for="(item2, j) in options2" :key="j" class="border_bottom">
<text>{{ item2.label }}</text>
<radio :value="item2.value" :checked="item2.checked" color="#0099FF" class="radiobox"/>
</view>
</radio-group>
</scroll-view>
</view>
<!-- 三级 -->
<view style="width: 100%;" :hidden="show2">
<scroll-view scroll-y style="height: 300px;">
<radio-group class="radiobox_group" @change="radioChange3">
<view v-for="(item3, k) in options3" :key="k" class="border_bottom">
<text>{{ item3.label }}</text>
<radio :value="item3.value" :checked="item3.checked" color="#0099FF" class="radiobox"/>
</view>
</radio-group>
</scroll-view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
options1: [
{
value: '0',
label: '一级1',
children: [
{
value: '0-0',
label: '二级1-1',
children: [
{
value: '0-0-0',
label: '三级1-1-1'
},
{
value: '0-0-1',
label: '三级1-1-2'
},
{
value: '0-0-2',
label: '三级1-1-3'
},
{
value: '0-0-3',
label: '三级1-1-4'
}
]
}
]
},
{
value: '1',
label: '一级2',
children: [
{
value: '1-0',
label: '二级2-1',
children: [
{
value: '1-0-0',
label: '三级2-1-1'
},
{
value: '1-0-1',
label: '三级2-1-2'
},
{
value: '1-0-2',
label: '三级2-1-3'
},
{
value: '1-0-3',
label: '三级2-1-4'
}
]
},
{
value: '1-1',
label: '二级2-2',
children: [
{
value: '1-1-0',
label: '三级2-2-1'
},
{
value: '1-1-1',
label: '三级2-2-2'
},
{
value: '1-1-2',
label: '三级2-2-3'
},
{
value: '1-1-3',
label: '三级2-2-4'
},
{
value: '1-1-4',
label: '三级2-2-5'
},
{
value: '1-1-5',
label: '三级2-2-6'
},
{
value: '1-1-6',
label: '三级2-2-7'
},
{
value: '1-1-7',
label: '三级2-2-8'
}
]
}
]
}
],
options2: [],
options3: [],
isShowCascader: true, // 是否显示级联弹窗
val1: '',
val2: '',
val3: '',
id1: '',
id2: '',
id3: '',
value: '',
id: '',
// 取消选择，之前的不清空
oldValue: '',
oldId: '',
oldId1: '',
oldId2: '',
oldId3: '',
oldOptions1: [],
oldOptions2: [],
oldOptions3: [],
show1: true, // 是否显示二级
show2: true // 是否显示三级
}
},
created () {},
watch: {},
onShow () {},
methods: {
// 一级
radioChange1 (e) {
if (e.mp.detail) {
this.options2 = []
this.options3 = []
// this.show1 = false
this.toFalse(this.options1)
let id = e.mp.detail.value
this.options2 = this.recursion(id, this.options1, 1)
}
},
// 二级
radioChange2 (e) {
if (e.mp.detail) {
this.options3 = []
// this.show2 = false
this.toFalse(this.options2)
let id = e.mp.detail.value
this.options3 = this.recursion(id, this.options2, 2)
}
},
// 三级
radioChange3 (e) {
if (e.mp.detail) {
let id = e.mp.detail.value
this.toFalse(this.options3)
this.recursion(id, this.options3, 3)
}
},
// 找到所选的list
recursion (val, data, type) {
for (const element of data) {
if (element.value === val) {
switch (type) {
case 1:
this.val1 = element.label
this.value = this.val1
this.id1 = val
this.id = this.id1
element.children ? this.show1 = false : this.show1 = true // 显示二级
break
case 2:
this.val2 = element.label
this.value = this.val1 + '/' + this.val2
this.id2 = val
this.id = this.id2
element.children ? this.show2 = false : this.show2 = true // 显示三级
break
case 3:
this.val3 = element.label
this.value = this.val1 + '/' + this.val2 + '/' + this.val3
this.id3 = val
this.id = this.id3
break
}
element.checked = true // 勾选
return element.children ? element.children : []
}
}
},
// 显示级联选择
showCascader () {
this.isShowCascader = false
// 隐藏tabbar
wx.hideTabBar({
fail: function () {
setTimeout(function () {
wx.hideTabBar()
}, 500)
}
})
},
// 取消
cancel () {
this.isShowCascader = true
// 显示tabbar
wx.showTabBar({
fail: function () {
setTimeout(function () {
wx.showTabBar()
}, 500)
}
})
// 之前已经选择，不清空
this.value = this.oldValue ? this.oldValue : ''
this.id = this.oldId ? this.oldId : ''
this.toFalse(this.options1)
this.toFalse(this.options2)
this.toFalse(this.options3)
if (this.oldValue) {
this.options1 = this.oldOptions1
this.options2 = this.oldOptions2
this.options3 = this.oldOptions3
this.toTrue(this.options1, this.oldId1)
this.toTrue(this.options2, this.oldId2)
this.toTrue(this.options3, this.oldId3)
}
},
// 确定
confirm () {
this.isShowCascader = true
this.oldValue = this.value
this.oldId1 = this.id1
this.oldId2 = this.id2
this.oldId3 = this.id3
this.oldId = this.id
this.oldOptions1 = this.options1
this.oldOptions2 = this.options2
this.oldOptions3 = this.options3
},
// checked赋值为真，-->勾选
toTrue (data, id) {
for (const iterator of data) {
if (iterator.value === id) {
iterator.checked = true
}
}
},
// checked赋值为false，-->取消勾选
toFalse (data) {
for (const element of data) {
element.checked = false
if (element.children) {
this.toFalse(element.children)
}
}
}
},
mounted () {},
computed: {}
}
</script>
<style lang='less' scoped>
page {
background: #f8f8f8;
}
// 弹窗固定在底部
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
.input_conter {
padding: 10px 0px;
// position: relative;
// display: -ms-flexbox;
// display: flex;
// input {
// position: absolute;
// margin: -23px 100px;
// }
}
// 横向滑动不生效，需在外添加一层
.scroll_box {
width: 100%;
height: auto;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
.scroll_x {
height: 100%;
width: auto;
overflow:hidden;
}
}
// 均分成3列
.nav {
padding: 10px;
width:100%;
// height:100px;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
display:flex;
view {
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
text-align:center;
line-height:10px;
}
}
.radiobox_group {
line-height:2.5;
.border_bottom {
width: 90%;
border-bottom: 1px solid #ddd
}
.radiobox {
margin: 10px;
}
}
// 遮罩层
.mask {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
background: rgba(0, 0, 0, .4);
transition: all .4s ease-in-out 0;
pointer-events: none;
opacity: 1;
pointer-events: auto
}
// 级联选择
.cascader {
position: absolute;
width: 100%;
height: 600rpx;
bottom: 0;
left: 0;
z-index: 9999;
background: #fff;
display: flex;
flex-direction: column;
transition: all .4s ease-in-out 0;
}
.cascader_header {
height: 20%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eeeeee;
height: 100rpx;
padding: 0 20rpx;
}
// 取消
.cancal {
font-size: 16px;
font-weight: 400;
color: #999999;
}
// 确定
.confirm {
font-size: 16px;
font-weight: 400;
color: #08bb5d !important;
}
button {
background: inherit;
border: none;
margin: 0;
}
button:after {
border-radius: 0rpx;
border: none;
}
</style>
