vue2.0实战开发一个基于兴趣 =》话题的交流平台

淡淡的烟草味﹌ 2022-06-01 14:15 84阅读 0赞

一、技术选型

前台：vue2.0+vuex+vue-router+axios+less+rem+viewport(设置宽度为定值)

后台:nginx+php(laravel)+mysql+redis+linux

二、前端开发  
一个宗旨不用ui轮子全部自己造  
浏览器hack手段  
以下浏览器是完美支付的浏览器

小米，猎豹，dcloud打包生成的app

其他浏览器都不能完美支持，最坑的是uc，他默认不支持transition,和touch相关事件。其他浏览器的的不是不支持向上touch事件(我要依靠这个向上加载)(浏览器有自定义load，是直接刷新，不能这样做)，要么就是不支持向右touch事件（浏览器会返回上一页，而我只是页面组件item位置的移动），  
一句话来说，就是大多数浏览器都有自定义手势事件行为，我们要把这些默认行为禁用掉比如向上刷新(己经决)，向右到上一页  
思路，在合适的时间禁 止掉浏览器的默认行为  
1.上下滑动的

//横向滑动距离值
              this.m_sX = this.moveX - this.startX;
              //纵向滑动距离值
              this.m_sY = this.moveY - this.startY;
              //this.scroll内容区域的scroll值
              if(this.m_sY>0&&this.scroll===0){
                ev.preventDefault()
              }

2.左右滑动的(可以解决uc的坑)

//横向滑动距离值
              this.m_sX = this.moveX - this.startX;
              //纵向滑动距离值
              this.m_sY = this.moveY - this.startY;
              if(Math.abs(this.m_sX)>Math.abs(this.m_sY)){
                ev.preventDefault()
              }