快应用开发 - 亮度控制实现

2018-11-20 03:18:40来源：博客园阅读 ()

快应用开发 - 俗称快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装，即点即用，享受原生应用的性能体验。
最近由于项目需求，接触了，但在开发中，各种坑，首先布局，只在flex布局基础上去实现布局，大部分js事件不支持，至于怎样，你们自己去想吧。
废话不多说，实现效果图： (可拖动调节)

<div id="sliderBox" ontouchstart="SliderX_Start" ontouchmove="SliderX_Move">
    <div style="width:{{ slideWidth }}"></div>
</div>

export default {
private: {
    slideWidth: 0,
    startX: 0,
    moveEndX: 0,
    X: 0 
     // 亮度控制
    SliderX_Start(e){
        this.startX = e.touches[0].pageX - e.touches[0].offsetX;
         console.log('--------------->> e：',e);
    },
    SliderX_Move(e){
        this.moveEndX = e.changedTouches[0].pageX;
        this.X = this.moveEndX - this.startX;
        this.slideWidth =  parseInt(this.X);
         console.log('--------------->> 移动距离：',parseInt(this.X));
     },
}