使用js实现微信小页面翻页的原理介绍
文中要介绍的内容是四个手机页面，手指向上或者向下滑动可以实现翻页的功能。由于代码比较简短，可能存在许多bug，思路可供大家参考。 1.实现方式介绍： 首先我们在页面写一个div----box，这个div又包含4个div---page1-page4； page1到page4每个div大小和屏幕一样大。 首先显示page1，使用js监听用户触摸事件，当用户滑动屏幕时，执行css动画，page1向上移动到出界面，page2向上移动到进入界面。动画执行完成后，需要使用js将page的属性-->动画类去掉，以免影响其下一步操作。 2.编写html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>WeChatPortPage</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <link rel="stylesheet" type="text/css" href="css/animation.css"/> </head> <body> <div