# Vue实战读书笔记

# rem 和 px换算rem

rem计算

// DOMContentLoaded: dom内容加载完毕, HTML文档被加载和解析完成

document.addEventListener('DOMContentLoaded',() => {
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + "fontSize"
})

px换算rem

$ratio: 375 / 10

@function px2rem($px) {
    @return $px / $ratio + rem
}

# 手势操作分页

手势滑动操作屏幕实现上一页/下一页

// 根据案例实现自带事件
this.rendition.on("touchstart", event => {
    this.touchStartX = event.changedTouches[0].clientX; // 获取第一根手指滑动的X轴的值
    this.touchStartTime = event.timeStamp; // 获取滑动开始时间
});

this.rendition.on("touchend", event => {
    event.preventDefault();
    event.stopPropagation();
    const offsetX = event.changedTouches[0].clientX - this.touchStartX; // 获取手指滑动结束后 与 开始 之间 的 X轴距离
    const time = event.timeStamp - this.touchStartTime; // 获取滑动结束时间
    // console.log("offsetX",offsetX)
    // console.log("time",time)

    // 根据滑动距离和时间判断 用户手势操作是否是要进行分页操作
    // 从左往右 进入上一页
    if (time < 500 && offsetX > 40) { 
        this.prevPage();
    } else if (time < 500 && offsetX < -40) {
        // 从右往左 进入下一页
        this.nextPage();
    }
});