huayu-web
/
assistant-todo-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

轮播图高度

This commit is contained in:
HuaYu 2023-01-14 16:39:41 +08:00
parent 49d6146e3f
commit 366e824545
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -28,7 +28,7 @@
<title>华宇平台</title> <title>华宇平台</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.

3
src/pages/Home/index.css
View File

@ -6,6 +6,9 @@
user-select: none; user-select: none;
align-items: top; align-items: top;
} */ } */
.context-swapper{
height: 212px;
}
.adm-grid-item { .adm-grid-item {
text-align: center; text-align: center;
} }

35
src/pages/Home/index.js
View File

@ -9,20 +9,24 @@ import ImgDTZF from './../../assets/images/nav-3.png'
import ImgQCZ from './../../assets/images/nav-4.png' import ImgQCZ from './../../assets/images/nav-4.png'
const localCatalog = [ const localCatalog = [
{ "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"}, { "imgSrc": ImgZZ, "title": "整租", "path": "/todo" },
{ "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"}, { "imgSrc": ImgHZ, "title": "合租", "path": "/todo" },
{ "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"}, { "imgSrc": ImgDTZF, "title": "地图找房", "path": "/message" },
{ "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"} { "imgSrc": ImgQCZ, "title": "去出租", "path": "/me" }
] ]
class HomeInner extends React.Component { class HomeInner extends React.Component {
state = { state = {
swipers: [] swipers: [],
isSwiperLoaded: false
} }
async getSwitpers() { async getSwitpers() {
const res = await axios.get('http://localhost:8080/home/swiper') const res = await axios.get('http://localhost:8080/home/swiper')
console.log('轮播图信息' + res.data.body)
this.setState( this.setState(
{ swipers: res.data.body } {
swipers: res.data.body,
isSwiperLoaded: true
},
// ()=>{ // ()=>{
// return{swipers:res.data.body} // return{swipers:res.data.body}
// } // }
@ -34,7 +38,7 @@ class HomeInner extends React.Component {
renderSwipers() { renderSwipers() {
return this.state.swipers.map(item => (<Swiper.Item key={item.id}> return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
<img <img height='212'
src={'http://localhost:8080' + item.imgSrc} src={'http://localhost:8080' + item.imgSrc}
style={{ width: '100%', verticalAlign: 'top' }} style={{ width: '100%', verticalAlign: 'top' }}
/> />
@ -43,13 +47,20 @@ class HomeInner extends React.Component {
render() { render() {
return <div className='context'> return <div className='context'>
<Swiper autoplay loop>{this.renderSwipers()}</Swiper> <div className='context-swapper'>
{
this.state.isSwiperLoaded ? <Swiper autoplay loop autoplayInterval='1500'>{this.renderSwipers()}</Swiper> : ""
}
</div>
<Grid columns={4}> <Grid columns={4}>
{ {
localCatalog.map((item,index) => ( localCatalog.map((item, index) => (
<Grid.Item key={index} onClick={()=>{ <Grid.Item key={index} onClick={() => {
console.log("点击跳转") console.log("点击跳转")
this.props.to(item.path)}}> this.props.to(item.path)
}}>
<div ><img src={item.imgSrc} /><h2>{item.title}</h2></div> <div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
</Grid.Item> </Grid.Item>
)) ))