UI设计图：
组件代码：
import Taro from '@tarojs/taro';
import { View, Button } from '@tarojs/components';
import classNames from 'classnames';
import IconFont from "@/components/iconfont";
import './index.scss';
class TreeSelect extends Taro.PureComponent {
constructor(props) {
super(props);
this.onDialogConfirm = this.onDialogConfirm.bind(this);
}
state = {
isActive: 0,
rightList: [],
selectedList: []
}
static defaultProps = {
list: [],
confirmText: '保存',
showConfirm: true, // 是否显示确定按钮
}
componentDidMount() {
const { list } = this.props;
this.setState({
rightList: list[0].children
});
}
// 确认事件
onDialogConfirm() {
const { onConfirm } = this.props;
const { selectedList } = this.state;
if (typeof onConfirm === 'function') {
onConfirm(selectedList);
}
}
selectLeft(index) {
const { list } = this.props;
this.setState({
rightList: list[index].children,
isActive: index
});
}
addSelected(id) {
const { selectedList } = this.state;
const newList = Array.from(new Set([...selectedList, id]));
this.setState({
selectedList: newList
});
}
render() {
const {
list,
confirmText,
showConfirm,
styles
} = this.props;
const {
isActive,
rightList,
selectedList
} = this.state;
return (
<View style={{...styles}}>
<View className='treeSelect'>
{/* left-father */}
<View className='treeSelect-left'>
{list && list.map((item, index) =>
(
<View
key={item.id}
className={classNames('leftBtn',
{ active: isActive === index },
{ activeA: isActive === (index + 1) },
{ activeB: isActive === (index - 1) })
}
onClick={() => { this.selectLeft(index); }}
>
{item.title}
</View>
)
)}
</View>
{/* right-children */}
<View className='treeSelect-right'>
{rightList && rightList.map((item) =>
(
<View
key={item.id}
className={classNames('rightBtn', { active: selectedList.includes(item.id) })}
onClick={() => {this.addSelected(item.id);}}
>
<View>{item.title}</View>
<View style={{ display: selectedList.includes(item.id) ? 'flex' : 'none' }} className='checkIcon'>
<IconFont name='common_icon_dagou' size={32} color='rgb(58,110,244)' />
</View>
</View>
)
)}
</View>
</View>
{showConfirm && <View className='btns'>
<Button
FormType='submit'
className={classNames('btn', { active: selectedList.length })}
onClick={this.onDialogConfirm}
>{confirmText}</Button>
</View>}
</View>
);
}
}
export default TreeSelect;
组件样式表：
.treeSelect {
100%;
background-color: #fff;
display: flex;
justify-content: flex-start;
&-left {
40%;
.leftBtn {
position: relative;
100%;
height: 88px;
line-height: 88px;
padding-left: 80px;
color: #171717;
box-sizing: border-box;
background-color: #F7F7F9;
&.active {
color: #3A6EF4;
background-color: #fff;
}
&.activeA{
border-bottom-right-radius: 20px;
}
&.activeB{
border-top-right-radius: 20px;
}
}
}
&-right {
60%;
.rightBtn{
height: 88px;
line-height: 88px;
padding-left: 120px;
color: #171717;
box-sizing: border-box;
&.active {
color: #3A6EF4;
display: flex;
justify-content: space-between;
align-items: center;
.checkIcon{
margin-right: 50px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
.btns {
position: absolute;
left: 0;
right: 0;
bottom: 40px;
text-align: center;
padding: 0 24px;
box-sizing: border-box;
.btn {
100%;
height: 80px;
padding: 0;
color: #fff;
background-color: #A5A8AF;
box-shadow: 0px 4px 12px #B9BCC5;
font-weight: bold;
border: none;
border-radius: 12px;
&.active {
background-color: #3A6EF4;
box-shadow: 0px 4px 12px #3A6EF4;
}
}
}
调用组件：
import TreeSelect from '@/components/TreeSelect';
。。。
const myList = [
{
id: '1212121',
title: '日用品',
children: [
{
id: '32232312',
title: '洗发水'
},
{
id: '3234232',
title: '洗发水1'
},
{
id: '32243132',
title: '洗发水2'
},
{
id: '2131212312',
title: '洗发水3'
},
]
},
{
id: '121212w2221',
title: '服务',
children: [
{
id: '3223222222312',
title: '洗发水222'
},
{
id: '3234232342432',
title: '洗发水3331'
},
{
id: '32243342132',
title: '洗发水4442'
},
{
id: '123232113324524',
title: '洗发水3555'
},
]
},
{
id: '121212w2221',
title: '服务333',
children: [
{
id: '322322222231332',
title: '洗发水233322'
},
{
id: '323423234243222',
title: '洗发水3333331'
},
{
id: '322433421322',
title: '洗发水3334442'
},
{
id: '1232321133224524',
title: '洗发水3533355'
},
]
}
];
<TreeSelect list={myList} />
微信小程序预览效果：
TBC.