vue

【Vant的Rem适配方案】

Rem适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值.
PostCSS 配置
1.在根目录下新建一个postcss.config.js
2.下载
npm install postcss-pxtorem --save-dev
3.在postcss.config.js中粘贴以下代码片段
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      //这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
      propList: ['*']
    }
  }
  }
设置基准值lib-flexinle
1.下载
npm i -S amfe-flexible
2.在main.js中引入
import 'amfe-flexible'
# 这样就完成适配了*

更多适配问题参考：https://www.cnblogs.com/lyzg/p/4877277.html

https://www.cnblogs.com/lyzg/p/5058356.html

库：https://github.com/amfe/lib-flexible

在vue项目中使用less

1.安装 less 和 less-loader。

命令:         npm install less less-loader --save-dev

上述存在版本问题

npm i less@3 less-loader@5 --save-dev

2.打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面

添加一段：{test: /.less$/,loader: "style-loader!css-loader!less-loader" }

3.代码中的 style 标签中加上 lang="less" 属性即可使用,或者通过@import引入.less文件

vue-router的三种跳转方式

1. router-link

1. 不带参数
 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
 
 
 
2.带参数
 
<router-link :to="{name:'home', params: {id:1}}">  
 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
 
<router-link :to="{name:'home', query: {id:1}}"> 
 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id

2. this.$router.push() (函数里面调用)

1.  不带参数
 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
 
 
 
2. query传参 
 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
 
 
 
3. params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
 
 
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3. this.$router.replace() (用法同上,push)

4. this.$router.go(n) ()

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

ps : 区别

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

vue修改vant自带的样式

今天用vue写页面时，发现使用vant的有些UI组件，修改CSS样式无效。

解决办法：

1.对于css语法起作用

<style scoped>
  .login-submit-button {
    background: #FFA626;
    border-radius: 4px;
    color: white;
  }
  .login-input-checkbox >>> .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #FFA626;
    border-color: #FFA626;
  }
</style>

使用深度选择器，使用 >>> 操作符，将scoped样式中的选择器“深入”，即影
响子组件

上述代码将会编译成：

.login-input-checkbox[data-v-ef68022e] .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #FFA626;
    border-color: #FFA626;
}

而不是错误的：

.login-input-checkbox .van-checkbox__icon--checked .van-icon[data-v-ef68022e] {
    color: #fff;
    background-color: #FFA626;
    border-color: #FFA626;
}

2.对于scss，less这类的预处理器

使用 /deep/ 操作符取而代之——这是一个 >>> 的别名

代码如下：

<style scoped lang="less">
  .login-submit-button {
    background: #FFA626;
    border-radius: 4px;
    color: white;
  }
  /deep/.login-input-checkbox .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #FFA626;
    border-color: #FFA626;
  }
</style>

vue 用纯js监听滚动条到底部实现上拉加载

在移动端网页项目中，基本都会有列表页的上拉加载功能。在这篇文章中，我结合vue的生命周期用纯js写了一个监听滚动条的函数。

怎样用纯js判断滚动条是否到底部

先了解几个重点要素：

获取滚动条到顶部的位置：document.documentElement.scrollTop、document.body.scrollTop
获取当前窗口内容可视区：document.documentElement.clientHeight、document.body.clientHeight
获取滚动条的总高度：document.documentElement.scrollHeight、document.body.scrollHeight
触发监听的函数：window.onscroll = function()｛...｝
判断到底部的等式：滚动条到顶部的位置 + 当前窗口内容可视区 == 滚动条的总高度

主要代码

监听的函数

为窗口添加滚动条事件其实非常的简单，
window.onscroll=function(){};
注意在获取滚动条距离的时候
谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
这样才能兼容各个浏览器！

created() {
  let that = this;
  window.onscroll = function(e){
var e =e || window.event;
// scrollTop 滚动条滚动时，距离顶部的距离 
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
// windowHeight 可视区的高度 
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; 
// scrollHeight 滚动条的总高度 
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
 // 滚动条到底部的条件 
if(Math.abs(scrollTop + windowHeight - scrollHeight) < 100){ 
// 加载数据  that.loadMore(); 
} 
} 
},

2.data

vue