移动端标题 Vue 居中

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

\

案例效果

vue代码

<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">
        &#xe624;
      </span>
    </div>
    <div class="header-title">
      城市选择
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped lang='stylus'>
@import '~css/var.styl'
.header{
  width: 100%;
  line-height:.88rem;
  background: $bgColor;
  color: $textColor;  
  font-size: .32rem;
  position: relative;
}
.header-left{
  width: .4rem;
  padding: 0 .2rem;
  text-align: center;
  font-weight: bold;
  position: absolute;
}
.header-title{
  text-align :center;
}
</style>

首先用了 text-align：center； 对文字进行了居中 但由于它们都是块级元素所以换了一行 此时运用了相对定位和绝对定位来将下面的文字定位到了上面 position: relative; position: absolute;

移动端事件

事件类型

移动端事件列表

• touchstart 元素上触摸开始时触发
• touchmove 元素上触摸移动时触发
• touchend 手指从元素上离开时触发
• touchcancel 触摸被打断时触发
• 

这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。

应用场景

touchstart 事件可用于元素触摸的交互，比如页面跳转，标签页切换

touchmove 事件可用于页面的滑动特效，网页游戏，画板

touchend 事件主要跟 touchmove 事件结合使用

touchcancel 使用率不高

注意：

• touchmove 事件触发后，即使手指离开了元素，touchmove 事件也会持续触发
• 触发 touchmove 与 touchend 事件，一定要先触发 touchstart
• 事件的作用在于实现移动端的界面交互

事件绑定

方式一

box.ontouchstart = function(){
    console.log('touch start')
}

方式二

box.addEventListener('touchstart', function(){
	console.log('touch start')
})

这里推荐使用第二种，第一种有时会失灵。