react/rax/uin-app/View 移动端欢迎页上滑进入主页

react/rax/uin-app/View 移动端欢迎页上滑进入主页

小白今天接触到移动端的上滑动作，参考了其他人的笔记，做了下自己项目要求的优化，这里仅记录上滑动作

jsx

<View className={styles.containerFill}>
      <View
        className={styles.scrollFullpage}
        onTouchStart={scrollTouchStart}
        onTouchMove={scrollTouchMove}
        onTouchEnd={scrollTouchEnd}
        style={{ transform: `translateY(-${scrollIndex * 100 }%)`, marginTop: `${marginTop}rpx` }}
      >
        <View  style={{ background: '#3399FF' , height: '100vh' }}>
          <text>页面1</text>
          <text>我的页面1</text>
        </View>
        <View style={{ background: '#00CC66',  height: '100vh' }}  >
          <text>页面2</text>
          <text>我的页面”2</text>
        </View>
      </View>
    </View>

function

import {  useState } from 'rax';

  const [touchStartY, setTouchStartY] = useState(0);
  const [scrollIndex, setScrollIndex] = useState(0);
  const [marginTop, setMarginTop] = useState(0);
  
 function scrollTouchStart(e) {
    setTouchStartY(e.touches[0].pageY);
  }

  function scrollTouchMove(e) {
    const py = e.touches[0].pageY;
    if (py - touchStartY < 100 && py - touchStartY > -100 && scrollIndex !== 1) {
      setMarginTop(py - touchStartY);
    }
  }

  function scrollTouchEnd(e) {
    const deltaY = e.changedTouches[0].pageY - touchStartY;
    if (Math.abs(deltaY) > 50 && scrollIndex < 1 && deltaY < 0) {
      setScrollIndex(1);
    }
    setMarginTop(0);
    setTouchStartY(0);
  }

scss

.containerFill{
  height: 100vh;
  overflow: hidden;
}
.scrollFullpage{
  height: 100vh;
  transition: all 0.3s
}

pageY、clientY、offsetY的区别

pageY：鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化；
clientY：鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点；
offsetY：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

参考文献

文献1的大佬在动作中添加了一些动画，亲测有效
文献2的大佬不限于上滑动作，需要上下左右其他动作的盆友可以参考

[1] :https://blog.csdn.net/qq_35713752/article/details/93202796
[2] : https://www.cnblogs.com/chenshaoxiong/p/14900854.html