2018年12月_hzxOnlineOk

原创 Vue 移动端UI库----Mint-UI的Swiper组件的坑

使用步骤：1.安装：npm install mint-ui -S2.引入组件// 完整引入import Vue from 'vue';import Mint from 'mint-ui';import "mint-ui/lib/style.css"Vue.use(Mint);// 按需引入注意：和Element-ui类似，按需引入时需要借助babel-plu...

2018-12-29 17:58:59 2474

转载 javascript中获取dom元素的高度和宽度

javascript中获取dom元素的高度和宽度javascript中获取dom元素高度和宽度的方法如下：网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offse...

2018-12-29 16:24:45 134

原创一个判断语句，区分当前设备是PC还是移动端

亲测有效：if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "https://www.baidu.com/"; // 这是移动端} else { window.location.href = "http://news.baidu.com...

2018-12-29 16:15:52 994 2

原创响应式布局@media写移动端适配时，ChromeF12开发者工具发现样式被划掉了

如题，需求需要将PC和Mobile放到一套代码里去实现，我选择了用响应式布局（即媒体查询技术）实现适配，但是在响应式布局@media写移动端适配时，ChromeF12开发者工具发现样式被划掉了？？？why？？？经过仔细观察，发现是由于less的样式层级写的不够详细导致的，因为我们知道，css的样式名写的越详细，权重就越高...

2018-12-29 15:09:46 1302

原创 Vue子组件如何实时接收父组件传递过来的属性

在子组件中使用watch监听props中那个父组件传递过来的属性，注意：如果是对象，而非普通的属性例如info:'xxxx'，则需要使用以下写法（但是又测试了一遍，发现不用写deep:true也可以，有点懵=。=）：props: {info: Object},watch: {info: {handler (curVal, oldVal) {this.onScroll(...

2018-12-28 19:11:45 1704

原创 js做固钉效果滚动事件监听值总是上一次的在滚动事件绑定时碰到的坑DOMMouseScroll

再次更新：又碰到了个问题，不是html或body作为滚动容器的话，当fixed定位的菜单在鼠标光标位于其上方时，无法滚动。。。所以必须使用html或body作为容器来滚动。。。以下是旧的：更新：今天再次遇到了这个问题，我更换了绑定滚动的对象从html变成了<div class="home"></div>，但是绑定滚动事件仍然使用以下：if (docume...

2018-12-28 18:57:47 971

原创 scale放大，父元素overflow:hidden失效的问题

这和 CSS 的 stack context 有关解决方法是给 “”父“”容器wrap 添加 position: relative; z-index: 1 的样式就好了，什么？照我说的做，还是没效果？大兄弟，检查下你的dom嵌套写的对不对哦！只有在父容器上写才有效果！什么是 CSS 的 stack context ？附以下链接：https://segmentfault.com/...

2018-12-27 19:29:31 1624

原创一个API解决区分当前使用应用的一切设备平台（Android、IOS、微信、QQ等等一切有提供支持的）

Window Navigator示例代码：<div id="example"></div><script> var txt = ''; txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Br...

2018-12-27 14:27:04 244

原创 !!vue-style-loader!css-loader?{"sourceMap":true}!报错

今天做VUE的多页面开发，遇到了这个问题，其实是因为less和less-loader没有安装导致的因为我使用了less，<style scoped lang="less">在终端输入 npm install less less-loader --save-dev 安装解决问题...

2018-12-27 14:12:06 1308

原创 Vue #app not find

最近将Vue从单页面应用（SPA）改造成多页面多路由应用时碰到了个问题，很经典。Q：Vue #app not find(大概是说没有找到id=“app”的元素)S：找了很久，发现是因为我在head标签里引入了某个页面的index.js，导致js还没引入完成，dom就渲染完成了，所以找不到dom容器节点#app附图如下：...

2018-12-27 11:45:30 696

原创 React-native如何区分IOS、Android设备（针对其操作系统使用不同的css样式）

1、导入 import { Platform } from 'react-native';2、使用 Platform.OS == 'IOS' ? doAFunc() : doBFunc()就这么简单。

2018-12-19 17:32:47 2007

原创 react-native移动端如何获取设备信息

这次介绍的获取移动设备信息的组件名叫：react-native-device-info，兼容IOS和安卓双平台，可以获取设备ID、设备品牌、设备型号、IP以及APP版本号等信息。是一个应用很广泛的基础组件。亲测可用，已在双端真机上测试，均能获取到设备信息！安装npm install --save react-native-device-info注：如果React Naitve的版...

2018-12-19 17:26:37 4660 2

hzxOnlineOk的博客