在 vue 使用 swiper.js 实现页面组件滑动特效
在vue使用swiper.js实现页面组件滑动特效在实现app端和小程序端我们经常能看见这种页面：
当我们滑动页面时，窗口会切换到下一个页面，同时导航栏也会切换到相对应的导航栏，当我们点击导航栏其中的一个元素时，窗口也会自动的滑动到对应的页面。
我在swiper.js官网的样例中并没有看到这样的样式，官网上所有的样式底部导航栏是小圆圈，而不是具体的navigation，因此我通过使用swiper.js提供的api来自行实现了这个功能。
我的思路：
第一步：滑动页面时，导航栏同步
是通过swiper-slide组件内部包一个PageMeesage组件，通过子父组件的传值defineProps，将swiper-slide的当前页面的页数的信息传给子组件PageMessage，之后在PageMessage中进行页面信息的整理后，将页面的是否呈现在窗口的信息通过localStorage传到show.vue中，再在此组件中实现bottomNav的渲染。
第二步：点击导航栏，窗口页面同步
通过使用swiper.js自带的swiper对象的slideTo函数实现。
下面是我的代码：
1234 ...
WebSocket & socket.io
WebSocket当我们创建聊天界面，需要建立客户端和服务器的双向连接时，这时，我们就需要使用到WebSocket，WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API，来帮助我们实现聊天对话的功能。
构造函数**WebSocket()**构造函器会返回一个 WebSocket对象。
1var aWebSocket = new WebSocket(url [, protocols]);
参数
url
要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。
protocols （可选）
一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（例如，你可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。
实例属性WebSocket.readyState返回当前 WebSocket的链接状态，只读。
1var readyState = WebSocket.readySta ...
css 杂谈
css 杂谈 这些天，第一次自己做了一个完整项目，过程中发现了各式各样的问题，尤其在css上，一些细枝末节的东西总是导致页面的样式发生错误。特此，写一篇文章来总结一下我在写css中遇到的问题。
布局
box-sizing
我们在实际开发中经常因为盒模型的大小推算失误导致的页面错乱，使用了box-sizing属性之后，就不用再担心这个问题。
box-sizing有三个属性
1box-sizing: content-box|border-box|inherit;
content-box
这个是 box-sizing 的默认值，也就是容易出问题的一个属性，因为当其的值为 content-box 时候，元素的padding 和 border 属性的值会在元素的宽度和高度属性基础上绘制元素的内边距和边框，举一个例子（源代码如下）：当我们不设置padding和border的时候，宽和高都为200px，但是当我们设置这些值后，宽和高就会变成244px。这就我在上面所说的会在元素的宽度和高度属性基础上绘制元素的内边距和边框。这样的问题总是会在我们写css时困扰我们，因此就出现了第二个属性， ...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment