1、vueX补充

mapState, mapGetters, mapActions, mapMutations

昨天我们讲到vueX的基本使用,当一个组件需要获取多个状态的时候,代码会有些重复和冗余

这时候就需要用到 mapState 辅助函数帮助我们生成计算属性

可以参考官方教程加深理解

  • 来看看怎么使用吧!
    我们先在vuex配置里定义一些全局数据

  • 1、在store/index.js中

//1、在store/index.js中
export default new vueX.Store({
   state:{
       count:10
   }
})
  • 2、在组件里
//2、组件里
import { mapState } from "vuex";

export default {
  name: "Store01",
  data() {
    return {};
  },
  //1)、把vueX中的state用计算属性,很麻烦
//   computed:{
//       count(){
//           return this.$store.state.count
//       }
//  },
//  2)、使用mapState(不能再写其它计算属性)
//   computed: mapState({
//     // 箭头函数可使代码更简练
//     count: state => state.count,
//   }),
//  3)、使用mapState继续简写(不能再写其它计算属性)
//   computed: mapState(['count']),
//  4)、使用mapState,这样写
    computed:{    
    //展开运算符    
        ...mapState(['count']),
        a:function(){
            return 250;
        },
    }
};
  • 3、模板里
<p>count:{{count}}</p>

要知道,在学习mapState以前,模板里获取state的值如下:

<p>count:{{$store.state.count}}</p>

其他三个函数用法类似,具体可以参考官方教程

2、postman

测试工具,测试后端接口的

使用方法及安装请参考Postman使用详解

3、移动端事件

pc端事件学了不少,移动端却还没怎么接触过,作为一名合格的前端开发人员,这怎么行呢?
直接进入主题!

3.1、click事件(单击事件)

类似于PC端的click,移动端也有click,在移动端中,连续click的触发有200ms ~ 300ms的延迟

那么,为什么移动端我们不用click呢?

移动端的click有300ms延迟的问题,在移动端浏览器中,连续两次点击是缩放操作,所以在用户点击屏幕后,浏览器会检查在300ms内是否有另一次点击,如果没有才触发click事件。因为有延迟,所以不使用。

3.2、touch类事件(触摸事件)

touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时,会触发
touchend:当手指离开屏幕时,会触发
touchcancel:可由系统进行的触发,比如系统中其他打断了touch的行为,可以触发该事件
onorientationchange: 屏幕旋转事件

部分代码实例

document.getElementById("box").ontouchstart  = function(){
		console.log('我被摸了');//手指触摸到屏幕
	}
document.getElementById("box").ontouchend    = function(){
		console.log('摸我的人走了');//手指离开屏幕
	}

3.3、touch的优先级高于click

3.4、阻止click事件的触发

我们在开发移动端时,如果只希望触发touch类型的事件,就需要阻止click事件的触发

要知道:当用户在点击屏幕的时候,系统会触发touch事件和click事件,touch事件优先级高,touch事件触发完毕后, 才会去触发click事件.

在touch事件里使用event.preventDefault()就可以阻止click事件的触发

document.getElementById("box").ontouchstart  = function(event){
	console.log('我又被摸了');//手指触摸到屏幕
	event.preventDefault();//阻止click事件
}

3.5、点透

什么是点透

1、A 和 B两个html元素不是后代和继承关系(如果是后代继承关系的话,就直接是冒泡了), A的z-index大于B,把A显示在B之上
2、A元素绑定touch事件, 在touch事件处理函数里,让A立即消失,
3、B元素绑定click事件

<div id="boxparent">
     <div id="box1">
     </div>
     <div id="box2">
     </div> 
</div>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.ontouchstart=function(e) {
   box1.style.display = 'none';
};
box2.onclick = function() {
  console.log('box2被点了');
}

解析:
当用户在box1元素上触摸屏幕时,先触发box1元素的touch事件,然后隐藏了box1,当click(延迟200-300ms)触发时,发现没有box1了,只有box2,所以,就触发了box2元素的click事件。

点透和冒泡的区别:

冒泡:是元素之间存在父子关系。
点透:元素之间没有父子关系(叠放关系),只是由于click在移动端里有200-300ms的延时造成的。

3.6、第三方的移动端事件库

  1. zepto.js

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。

  • tap — 元素 tap 的时候触发。(叩击)

  • singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)。

  • longTap — 当一个元素被按住超过750ms触发。

  • swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

  1. touch.js

    touch.js 是百度开发的一款插件,针对移动端应用的事件插件
    绑定事件

    touch.on( element, types, callback );
    //功能描述:事件绑定方法,根据参数区分事件绑定和事件代理。
    

    解除事件绑定

    touch.off( element, types, callback )
    

参数说明:

在这里插入图片描述
事件类型:

在这里插入图片描述
touch的配置:

touch.config(config)

config为一个对象

{
   tap: true,           //tap类事件开关, 默认为true
   doubleTap: true,     //doubleTap事件开关, 默认为true
   hold: true,           //hold事件开关, 默认为true
   holdTime: 650,      //hold时间长度
   swipe: true,           //swipe事件开关
   swipeTime: 300,         //触发swipe事件的最大时长
   swipeMinDistance: 18,      //swipe移动最小距离
   swipeFactor: 5,        //加速因子, 值越大变化速率越快
   drag: true,         //drag事件开关
   pinch: true,       //pinch类事件开关
}

事件代理格式:

1)、事件代理绑定
touch.on( delegateElement, types, selector, callback );
2)、解除事件代理绑定
touch.off( delegateElement, types, selector, callback )

参数说明:

在这里插入图片描述
事件处理对象(event):

事件处理函数的第一个参数为事件对象,除了原生属性之外,百度手势库还提供了部分新属性

在这里插入图片描述

4、下拉刷新上拉加载(Better-scroll)

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。better-scroll 是基于原生 JS 实现的,不依赖任何框架。

详情戳这儿

Logo

前往低代码交流专区

更多推荐