React 双滑块交叉滑动

最新推荐文章于 2024-06-26 09:44:37 发布

燃烧的冰山..

最新推荐文章于 2024-06-26 09:44:37 发布

阅读量439

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43822237/article/details/119896666

版权

html代码：

<body>
    <div id="root"></div>
</body>

script代码：

<script type="text/babel">
    const root = document.querySelector('#root')
    class Comp extends React.Component {
        constructor(...args) {
            super(...args)
        }
        fn(ev) {
            // 获取鼠标点击的距离
            this.pageX = ev.changedTouches[0].pageX - ev.target.offsetLeft
            // 获取父级
            this.parentWidth = ev.target.parentNode.offsetWidth - ev.target.offsetWidth
            // 获取父级
            this.parent = ev.target.parentNode
            // 获取线条
            this.line = this.parent.children[2]


            // 获取左边小球
            this.oBall = this.parent.children[0]
            // 右边小球
            this.oBallTwo = this.parent.children[1]

            document.ontouchmove = this.fnMove.bind(this)
            document.ontouchend