标签归档:vue

iOS 11 中 fixed 容器中 输入框光标错位的问题处理

iOS11 之后,fixed浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面。

这个问题很容易复现,只要满足以下条件即可触发此问题:

1、页面 body 高度超过视窗高度,即页面有滚动条。
2、点击页面中 fixed 定位的容器中的输入框,键盘弹起如果发生页面滚动或者键盘弹起后手动滚动页面则会出现如上面视频中光标偏移的问题。偏移量为页面滚动的距离。

目测确实是 iOS 11 新版 WebKit 引入 的 bug。目前处理的方案有两个。

一:在弹窗显示时,通过给 body 设置相关样式,使body不可滚动:

height: 100%!important;
overflow: hidden!important;

关闭弹窗后,注意要把相关样式移除。

二:在输入框blur的时候将页面滚动到顶部(起始位置):

<input type="tel" @blur.prevent="scrollTop()" @focus.prevent="stopScroll()" class="login-phone" v-model.trim="loginPhone" placeholder="请输入手机号"/>
......
scrollTop: function(){
	if(this.$fun.isIOS()){
		this.scrollTimer = setTimeout(()=>{
			document.body.scrollTop = 0
    		document.documentElement.scrollTop = 0
		},10)
	}
},
stopScroll: function(){
	if(this.scrollTimer && this.$fun.isIOS()) clearTimeout(this.scrollTimer)
},

这个方案用在了vue项目,需要注意是input blur的时候需要做一下延迟,否则会有抖动现象,focus的时候取消定时。

vue-awesome-swiper 使用问题汇总

因为之前都是使用Swiper插件来实现各种轮播效果,在新的vue项目中,就采用了vue-awesome-swiper这个基于Swiper的组件。但是使用的过程,出现不少的问题,现将出现的问题及解决方法记录下来。

这里先贴出最终的主要代码片段:

<div class="banner" ref="banner">
  <div v-if="bannerList.length"><!-- 使用v-if,处理异步请求数据,导致轮播第二次之后,首屏会自动跳过 -->
    <swiper :options="bannerOption" ref="bannerSwiper">
      <swiper-slide v-for="(item,index) in bannerList" :key="index">
        <img :src="item.img" alt="" class="swiper-lazy">
      </swiper-slide>
    </swiper>
  </div>
</div>
export default {
  data() {
    return {
      bannerOption: {
        slidesPerView: 1,
        loop: true,
        autoplay: {//定时轮播的正确写法
          delay: 3000,
          disableOnInteraction: false //处理滑动之后不能自动轮播的问题
        },
        on:{
          click:()=>{//点击事件需放在这里处理,否则无法触发最后一个轮播图
            let index = this.$refs.bannerSwiper.swiper.realIndex
            let link = this.bannerList[index]['link']

            window.location.href = link
          }
        }
      },
      bannerList: []
    }
  },
  activated(){

    if(this.bannerList.length) this.$refs.bannerSwiper.swiper.slideNext()//处理从其他页面切换回来轮播图不滚动问题
  }
}

问题1:定时轮播,不能直接给autoplay赋值毫秒数,需要使用上面的例子中写法。

问题2:异步请求数据,轮播第二次之后,首屏会自动跳过,原因是由于数据还没加载完成,swiper就初始化了,解决的方法是采用v-if的方式,等待数据加载完成后再初始化。

问题3:最后一个轮播图点击无效,目前处理的方法是将点击的事件放在swiper的on方法里面。

问题4:在vue单页应用中,从其他组件切换回来,轮播图不滚动了,处理方法是在activated钩子中调用swiper的slideNext方法

Vuejs 实用技巧

1.组件如何通过vue-router传递参数:

这里传递的参数希望不显式的添加在url上面,具体代码如下:

路由配置:

new Router({
  routes: [
    { path: '/', component: Index, name: 'index'},
    { path: '/mv/:id', component: Mplayer, name: 'mv'}
  ]
})

组件一设置参数:

<router-link :to="{ name: 'mv', params: { id: mv.id, poster: mv.cover, mvName: mv.name }}"></router-link>

组件二获取参数:

this.video.poster = this.$route.params.poster;
this.mvDetail.name = this.$route.params.mvName;

2.如何在事件内触发DOM元素的原生事件:

以点击回车键收起手机键盘为例,具体代码如下:

<form @submit.prevent="submit" action="">
  <input type="search" placeholder="搜索" v-model="searchKeyword" @keyup.enter="hideKeyboard($event)">
</form>
hideKeyboard: function(ev){
  ev.target.blur();
}