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

最新推荐文章于 2022-04-02 19:08:14 发布

MarkusVIP

最新推荐文章于 2022-04-02 19:08:14 发布

阅读量141

点赞数

分类专栏： 30天挑战自己

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

版权

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

26 篇文章 0 订阅

订阅专栏

加了自动翻页和给当前浏览照片换个样式。

PhotoItem.js

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

        return (
            <div className="photoMain">
                <div>total:{this.state.total},current:{this.state.current}
                ,startIndex:{this.state.startIndex},endIndex:{this.state.endIndex}</div>
                <div className="photo-detail">
                    <ul>
                        <li onClick={this.handlePrePhoto.bind(this)}>
                            <p>⟸</p>                    
                        </li>
                        <li>
                        <img src={this.state.showUrl} alt={this.state.showUrl}></img>
                        </li>
                        <li onClick={this.handleNextPhoto.bind(this)} >
                            <p>⟹</p>
                        </li>
                    </ul>
                </div>
                <div className="photo-list">
                <ul>
                    <li onClick={this.handlePrePhoto.bind(this)} ><p>⟸</p></li>
                    {photoItem.map((item,index) => (
                        (index >this.state.startIndex) && (index <this.state.endIndex)     ?                                      
                        <li className={index===this.state.current ?"curLi":null} key={item.FileName} onClick={this.changePhoto.bind(this,index)}>
                            <img src={this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName} alt={item.FileName}/>
                        </li>:null
                    ))}
                    <li onClick={this.handleNextPhoto.bind(this)} ><p>⟹</p></li>
                </ul>                
            </div> 
          </div>
        );
    }