[项目]Go语言与React实现图片浏览器 Day 5

最新推荐文章于 2024-06-06 09:42:13 发布

MarkusVIP

最新推荐文章于 2024-06-06 09:42:13 发布

阅读量190

点赞数

分类专栏： 30天挑战自己

本文链接：https://blog.csdn.net/ben0133/article/details/99462589

版权

30天挑战自己专栏收录该内容

26 篇文章 0 订阅

订阅专栏

修改了页面布局，让它看上去更像是个图片浏览器了，主要修改的就是PhotoItem.js文件，增加几个响应事件，比如可以显示下一张、上一张等。

PhotoItem.js

import React from 'react';
import '../config';
class PhotoItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            serverUrl: global.constants.serverUrl,
            photoItem: props,
            showUrl: "",
            current: 0,
            nextIndex: 0,
            preIndex: 0,
            total: 0,
        }
        this.phtotItemClick = this.phtotItemClick.bind(this);
        this.handlePrePhoto = this.handlePrePhoto.bind(this);
        this.handleNextPhoto = this.handleNextPhoto.bind(this);
        this.changePhoto = this.changePhoto.bind(this);
    }

    componentDidMount (){
        const {photoItem} = this.state.photoItem;
        console.log(photoItem.length);    
        if ( photoItem.length >0){
            var item = photoItem[0];
            this.setState({
                showUrl : this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName,
                total : photoItem.length,
            })            
        }
    }

    handlePrePhoto(){
        var current = 0;
        if (this.state.current>0){
            current = this.state.current-1;
        }
        this.changePhoto(current);

    }
    handleNextPhoto(){
        var current = 0;
        if ( this.state.total >this.state.current){
            current = this.state.current+1;
        }
        this.changePhoto(current);
    }

    changePhoto(current){
        const {photoItem} = this.state.photoItem;        
        var item = photoItem[current];
        if (this.state.total > current && current>=0){
            this.setState({
                current:current,
                showUrl : this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName,

            });
        }else{
            console.log(" No photo.");
        }
    }

    phtotItemClick(url){
        this.setState ({
            showUrl : url,
        })

    }

    render(){
        const {photoItem} = this.state.photoItem;

        return (
            <div className="photoMain">
                <div>total:{this.state.total},current:{this.state.current}</div>
                <div className="photo-detail">
                <ul>
                    <li onClick={this.handlePrePhoto.bind(this)}>                       
                        PrePhoto                        
                    </li>
                    <li>
                    <img src={this.state.showUrl}></img>
                    </li>
                    <li onClick={this.handleNextPhoto.bind(this)}>
                        NextPhoto
                    </li>
                </ul>
                </div>
                <div className="photo-list">            
                <ul>
                    <li>left</li>
                    {photoItem.map(item => (
                        <li key={item.FileName} onClick={this.phtotItemClick.bind(this,this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName)}>
                            <img src={this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName} alt={item.FileName}/>
                        </li>               
                    ))}
                    <li>right</li>
                </ul>                
            </div> 
          </div>
        );
    }
}

export default PhotoItem;

Photolist.css

body {
    margin: 0;
    padding: 0;
}

.photo-detail img {
    width: 900px;
}

.photo-detail li {
    display: inline;
    margin-left: 10px;
}

.photo-list {
    display: inline;
}
 ul {
    list-style: none;
}

.photo-list li {
    display: inline;
    margin-left: 10px;
}

.photo-list img{
    width: 150px;
}

截图：