mobile.ant.design在react中使用,组件Collapse
折叠面板的使用,并且有手风琴效果的。
要求:折叠面板默认展开第一项,把从接口获取到的菜单,展示到折叠面板上。主要是使用react中的useState函数实现,双向绑定(取到数值,进行渲染展示)。
home.js
import { useState} from 'react';//引入useState
//useState 通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state。useState会返回一对值:当前状态和一个让你更新它的函数,你可以在事件处理函数中或其他一些地方调用这个函数
import { Collapse } from 'antd-mobile'
import * as React from 'react';
import { getMenusTreeByPlat } from '../service/index'
export default function Home(props) {
const [menusList, setMenusList] = useState([])//调用 useState 函数 并导入状态的初始值[]
const getMenus = () => {
getMenusTreeByPlat().then((res) => {
if (res.code === 2000000) {
let arr=[]
res.data.forEach(element => {
if (element.menusCategory == 0) {
// 筛选数据是菜单类的
arr.push(element)
}
});
setMenusList(arr)//把arr得到的值放入到menusList中
}
})
}
return (
<div className='collapse'>
<Collapse accordion defaultActiveKey={'1'} >
//页面上再重新渲染menusList的值
{menusList.map((item, i) => {
return (
<Collapse.Panel title='第二项' key={i}>
手风琴模式只能同时展开一个
</Collapse.Panel>
)
})}
</Collapse>
</div>
)
}
home.scss
样式是项目需要而修改的
.collapse{
.adm-collapse {
.adm-list {
--border-inner: 0 !important;
.adm-list-body{background-color:#F0F1F6;
border-radius: 0.2564rem !important;
.adm-list-body-inner{
.adm-plain-anchor{
margin-bottom:0.3546rem !important;
border-radius: .2564rem !important;
line-height: 1.1538rem;
height: 1.641rem;
font-weight: 600;
font-size: .4615rem;
}
.adm-collapse-panel-content{
margin-top:-0.496rem !important;
margin-bottom: 0.3546rem !important;
border-bottom-left-radius: .2564rem !important;
border-bottom-right-radius: .2564rem !important;
}
}
}
}
}
}
最后效果: