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>
</head>
<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>
<!--
This HTML file is a template.

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

@ -6,6 +6,9 @@
user-select: none;
align-items: top;
} */
.context-swapper{
height: 212px;
}
.adm-grid-item {
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'
const localCatalog = [
{ "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"},
{ "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"},
{ "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"},
{ "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"}
{ "imgSrc": ImgZZ, "title": "整租", "path": "/todo" },
{ "imgSrc": ImgHZ, "title": "合租", "path": "/todo" },
{ "imgSrc": ImgDTZF, "title": "地图找房", "path": "/message" },
{ "imgSrc": ImgQCZ, "title": "去出租", "path": "/me" }
]
class HomeInner extends React.Component {
state = {
swipers: []
swipers: [],
isSwiperLoaded: false
}
async getSwitpers() {
const res = await axios.get('http://localhost:8080/home/swiper')
console.log('轮播图信息' + res.data.body)
this.setState(
{ swipers: res.data.body }
{
swipers: res.data.body,
isSwiperLoaded: true
},
// ()=>{
// return{swipers:res.data.body}
// }
@ -34,7 +38,7 @@ class HomeInner extends React.Component {
renderSwipers() {
return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
<img
<img height='212'
src={'http://localhost:8080' + item.imgSrc}
style={{ width: '100%', verticalAlign: 'top' }}
/>
@ -43,13 +47,20 @@ class HomeInner extends React.Component {
render() {
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}>
{
localCatalog.map((item,index) => (
<Grid.Item key={index} onClick={()=>{
localCatalog.map((item, index) => (
<Grid.Item key={index} onClick={() => {
console.log("点击跳转")
this.props.to(item.path)}}>
this.props.to(item.path)
}}>
<div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
</Grid.Item>
))