记一些开发中容易忽略的小问题

VUE与前端开发技巧

最新推荐文章于 2022-08-12 19:18:52 发布

原创最新推荐文章于 2022-08-12 19:18:52 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发

web 专栏收录该内容

5 篇文章

订阅专栏

本文分享了VUE项目在手机端访问时防止屏幕滚动、处理跨域问题、兼容性解决方案，以及使用iview2框架时的注意事项。还介绍了如何在页面跳转后回到顶部、实现页面满屏显示、获取URL参数、数组去重等实用技巧。

1、VUE项目，在手机端访问的项目，弹出自定义的遮罩层之后防止屏幕滚动

<div v-show="show" class="bg" :style="bg" @click="showLeft" @touchmove.prevent></div>

只要在html里面加入 @touchmove.prevent 就可以阻止屏幕滚动

2、线上项目如果是放在服务器上的项目，访问的链接和ajax请求连接要一致，否则会出现奇怪的跨域问题，只有iOS会报错，但是安卓不会。错误内容是 error。例如访问用的是域名那请求接口也要用域名去请求，访问用的是IP，请求接口也要用IP

3、swiper3 以后专注于做APP应用，在谷歌浏览器可以，但是在ie不兼容。如果要在ie使用，要换成swiper2 版本。

4、用iview2 做ui 框架，仅支持ie10 以上。

5、iview2 的导航菜单，如果有子菜单，它的 <Submenu>的 title 不支持点击，可以直接用jQuery获取dom元素绑定点击事件，目前没有发现别的解决办法

html代码：

<Submenu name="productList">
      <template slot="title">
      <!-- <Icon type="ios-stats" /> -->
      贷款产品
   </template>
  
   <MenuGroup>
       <MenuItem :name="'products'+i.loanProductsId" v-for="(i,index) in prolist" :key="index">{{i.loanProductsName}}</MenuItem>
   </MenuGroup>
</Submenu>

js:

methods:{
	take(){
        this.$router.push({name:'productList'});
    }
},
mounted(){
   	   let that = this;
       let list = document.querySelectorAll('.ivu-menu-submenu-title');
       list[0].addEventListener("click",function(){
           that.take();
       });
}

6、点击信的路由后，使页面滚动到最顶部，目前用的方法是：

router.afterEach((to,from,next) => {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
});

7、要让每个页面都至少占满屏幕，使得footer不飘在上面，设置

html, body
{  
  height: 100%;  
}

#app{
	height:100%;
}

8、上面的设置导致在手机端访问的时候，点击新的路由不会回到页面顶部，加上：

html, body
{  
  height: 100%;  
  overflow:hidden; //加上这句试试 ^-^
}

9、可以通过 URLSearchParams API 来获取查询参数

 var urlParams = new URLSearchParams(window.location.search);

10、数组去重

var arr = [1, 2, 3, 3, 4];
console.log(...new Set(arr));
// [1, 2, 3, 4]

11、可以利用ES6提供的扩展运算符合并两个对象

let a={
	name:1
}
let b={
	name:2
}

let c = {...b,...a};

12、给不足位数的字符串补足 .padStart() .padEnd()

let str = "234";
console.log(str.padStart(6,"0"));//在前面补0
//000234