移动端图片浏览 React 组件学习使用笔记

最新推荐文章于 2024-08-09 07:36:48 发布

开心就好1314520

最新推荐文章于 2024-08-09 07:36:48 发布

阅读量446

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_38388578/article/details/104843520

版权

官方文档：https://github.com/react-ld/react-wx-images-viewer/blob/master/README-cn.md

1、安装

npm install --save react-wx-images-viewer

2、在项目中使用

1、引入
import WxImageViewer from 'react-wx-images-viewer';
2、设置初始值
 this.state = {
      viewImgs: [],
      viewIndex: 0,
      viewOpen: false,
}
3、方法
  onClose = () => {
        this.setState({
            viewOpen: false
        })
    }
    openViewer=(imgs,index)=>{
       
        this.setState({
            viewImgs:imgs,
            viewIndex: index,
            viewOpen: true
        })
    }
4、渲染
    render() {
        const { imgs,viewImgs,viewIndex,viewOpen } = this.state;
<div className={styles.comment_item_imgs}>
                        {
                            imgs.length > 0 ?
                                imgs.map((el, index) => {
                                    return (
                                        <div key={index} onClick={this.openViewer.bind(this,imgs,index)} className={styles.item_img_wrap} style={{ backgroundImage: `url(${el})` }}>
                                        </div>
                                    )
                                }) : '暂无评论图片'
                        }
                    </div>

}
5、

{
                    viewOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.viewImgs} index={viewIndex}/> : ""
                }