react实现图片左右滑动和下拉加载

最新推荐文章于 2024-05-13 09:57:33 发布

Aaron_1127

最新推荐文章于 2024-05-13 09:57:33 发布

阅读量1k

点赞数 1

分类专栏： # react 文章标签： react.js javascript css js

本文链接：https://blog.csdn.net/weixin_43398820/article/details/129976597

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

背景

移动端实现图片左右滑动，滑到右边加载更多，图片也可以上下滚动，滑到底部加载更多

实现

主要是通过react实现，也可以使用vue或者jquery都可以，实现方式可以做参考。代码只需要把imgList数组中的图片地址换掉就可以直接查看效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<!-- 可能会存在cdn访问失败的问题，自己在菜鸟类似的站点可以找到下面3个可以访问的react 核心库的cdn -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style type="text/css">

.mall_list_container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 24px;
}

img {
  width: 300px;
  height: 400px;
  margin-left: 10px;
}

/* 左右滑动的关键css代码 */
.hot_goods_content {
  overflow: auto;
  display: flex;
}

/* 上下滑动的关键css代码，要设置一个高度 */
.good_list {
  height: 600px;
  overflow-y: scroll;
}

.good_list img {
  display: block;
  margin-top: 10px;
  width: 260px;
  height: 300px;
}

</style>
<body>

<div id="example"></div>
<script type="text/babel">

//实现左右滑动并滑到最右边加载更多
class GoodsList extends React.Component{
    constructor(props) {
        super(props);
        //图片可以换成可以访问到的图片地址
        this.state={
            imgList:['img1.png','img2.png','good1.png','good2.png','img1.png','img2.png','good1.png']
        }
    }
    componentDidMount() {
        //左右滑动的关键js代码，this.hotGoods为将要滑动的内容区间所在的DOM元素
        this.hotGoods.addEventListener('scroll',()=>{
            //clientWidth：为元素所在的宽度，可以看见的元素宽度，即this.hotGoods的宽度
            const clientWidth = this.hotGoods.clientWidth; 
            //scrollWidth：为元素里面所有内容的宽度包括滚动的内容加起来
            const scrollWidth = this.hotGoods.scrollWidth;  
            //scrollLeft：当前滚动到的位置到刚出现滚动条的位置的距离
            const scrollLeft = Math.ceil(this.hotGoods.scrollLeft) ;
            // 把上面三个参数打印出来可以清晰的看出他们之间的关系
            //还可以参考：https://www.runoob.com/jsref/prop-element-clientwidth.html，图画的很清楚
            if(scrollWidth-clientWidth<= scrollLeft) {
                //进到这里说明图片滑到了最右边了
                const {imgList} = this.state;
                //在imgList中push来模拟加载，实际实现上可以调用分页接口来加载数据
                this.setState({
                    imgList:[...imgList,...imgList.slice(0,2)]
                })
            }
        })
    }
    render() {
        const {imgList} = this.state;
        const {goodIndex} = this.props;
        return (
            <div className="hot_recommend">
                <h3>左右滑动</h3>
                <div className="hot_goods_content" ref={(node)=>this.hotGoods = node}>
                    {
                        imgList.map((img,index)=>(
                            <img src={img} key={index}/>
                        ))
                    }
                </div>
            </div>
        )
    }
}
//上下滚动，到底部加载更多
class MoreGoods extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            imgList:['img1.png','img2.png','good1.png','good2.png','img1.png','img2.png','good1.png']
        }
    }
    componentDidMount() {
        let box = document.querySelector('.good_list');
        box.addEventListener('scroll', ()=> {
            //clientHeight：元素的像素高度，包含元素的高度+内边距，不包含水平滚动条、边框和外边距
            const clientHeight = this.refs.goodList.clientHeight;

            //scrollHight：元素内容的高度，包括溢出的不可见
            const scrollHight = this.refs.goodList.scrollHeight;
            //scrollTop: 滚动条滑动的位置到开始出现滚动条的距离长度
            const scrollTop = Math.ceil(this.refs.goodList.scrollTop);
            // console.log(scrollHight,'scrollHight')
            // console.log(clientHeight,'clientHeight')
            // console.log(scrollTop,'scrollTop')
            if (scrollTop >= scrollHight - clientHeight) {
                const {imgList} = this.state;
                //模拟加载
                setTimeout(()=>{
                    this.setState({
                      imgList:[...imgList,...imgList.slice(0,3)]
                    })
                },1000)
                
            }
        })

    }
    render() {
        const {imgList} = this.state;
        const {moreIndex} = this.props;
        console.log(imgList.length,'图片长度')
        return (
            <div className="hot_recommend">
                <h3>上下滚动</h3>
                <div className="good_list" ref="goodList">
                    {imgList.map((item,index)=>(
                        <img src={item} key={index}/>
                    ))}
                </div>
            </div>
        )
    }
}

class MallHome extends React.Component{
  render () {
    return (
        <div className="mall_list_container" ref="mallContainer">
          <GoodsList/>
          <MoreGoods/>
        </div>
    )
  }
}
ReactDOM.render(
  <MallHome />,
  document.getElementById('example')
);
</script>

</body>
</html>