1 最近项目需要临时做一个调查问卷页面。考虑到性能和复杂度，决定通过使用cdn方式编写该页面。
效果如下：
移动端采用vant.ui
遇到的问题：
（1） 通过cdn方式进行开发的时候，引入官网的链接。查看network会报302错误。
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
解决的办法：复制该链接，下载到本地，重新链接本地地址
（2）引入链接也有讲究，script标签最好在写在body部分dom，而不能写在head里。这涉及到生命周期的问题和js引擎解析顺序问题。所以正确写法如下：
<head>
<link href="./css/vant.css""></link>
</head>
<body>
<div id="#app">
<van-row>
<van-col span="12">
<div @click="openDateLayout">起始日期</div>
</van-col>
<div @click="getEndDate">起始日期</div>
</van-row>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="./js/vant.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
}
})
</script>
</body>
（3）如果不设置viewport。会出现文本过小的问题。一定要记得设置view-port进行适配
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1">
--------------------------------------------------------------------------------------------------------------------
pc端则采用了iview的ui组件库。其中也遇到了一些问题：
效果如下：
问题一： 通过cdn引用组件，比如
<Row>
<Col span="12">选择日期</Col>
<Col span="12"> <DatePick ></DatePick></Col>
</Row>
这样是没有效果的。必须要在前面加上i。所以正确写法：
<i-row>
<i-col span="4">结束日期</i-col>
<i-col span="20"><date-picker type="date" placeholder="请选择日期"></date-picker> </i-col>
</i-row>
</i-row>
(2) 通过cdn方式引入方式开发。引入组件的时候会出现字体图标缺失的情况。比如日期选择器
data-pick右上角的日期小图标会无法显示。
解决办法：通过github拷贝iview的(dist/styles/)fonts文件夹至当前项目css同级目录即可显示
（3）通过vue-cli方式进行开发。在发送请求向后台传递参数的时候，我们序列化参数可以通过qs这个插件。如果是通过cdn方式进行开发。注意这里是Qs，
示例：
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
btn.οnclick=function(){
var data={
mobile:name,
password:pass
}
fetch(url+"/account/login",{
method:'POST',
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
body:Qs.stringify(data)
}).then((res)=>{
console.log("res:",res)
return res.json()
}).then(data=>{
console.log("data:",data)
}).catch(err=>{
console.log("err:",err)
})
}
（4）vant-ui 如果使用vant-dialog自定义内容。弹出框会出现内容文本模糊，主要原因是由于vant-ui的dailog
对弹出框进行定位设置的时候采用了transform:translate(-50%,-50%)，解决办法是自定义弹出框，在进行垂直居中的时候
改为 margin：-50% 0 0 -50%或者其他方式即可
（5）移动端如果内容过长，andriod下滑动正常但是在ios下会出现向下滑动卡顿的现象，解决的办法就是给容器添加-webkit-overflow-scrolling:touch;
（6）移动端如果内容过长，下滑的时候会出现页面飘动的情况。解决的办法就是给列表容器（下滑内容）的父容器添加overflow:hidden;
<div class="project-list">
<div class="project-item" v-for="item in proData">
<div class="title">
<span class="sub">{{item.title}}</span>
</div>
<div class="cont">{{item.cont}}</div>
</div>
</div>
.project-list{padding-bottom: 26px;margin-bottom:20px;-webkit-overflow-scrolling:touch; box-sizing: border-box;height: auto;overflow-y:auto;background: #fff
}
给其父容器project-box设置over-flow以后：
.project-list{background:#f8f8f8;width: 100%;padding-top: 18px;height: 100%; overflow:hidden;}
（6）vant 的tabs组件sticky设置无效？
vant的tabs属性有一个新的属性sticky，官方说明是否使用粘性定位布局。可以达到吸顶的效果。此外还有一个offsetTop属性。设置改值以后，当滚动条达到这个高度的时候，就会固定在顶部。
但是项目中发现这个属性设置以后居然无效。最后发现原因在于给当前页面的结构div设置 了一个class,其中有一个属性overflow：hidden。然后去掉父级元素的overflow以后发现成功了。后来仔细查了一下相关资料。varnt设置sticky的原理是利用了了css的position新属性值sticky，但是有几点需要注意：
生效规则
position:sticky 的生效是有一定的限制的，总结如下：
-
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 并且
top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。
- 并且
-
设定为
position:sticky元素的任意父节点的 overflow 属性必须是 visible，否则position:sticky不会生效。这里需要解释一下：- 如果
position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。 - 如果
position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
- 如果
-
达到设定的阀值。这个还算好理解，也就是设定了
position:sticky的元素表现为relative还是fixed是根据元素是否达到设定了的阈值决定的。
关于<van-popup>高度问题：
给popPup组件添加高度官方默认的方式是：<van-popup v-model="show" position="top" :style="{ height: '20%' }" />
通过style设置。疑问要考虑到适配问题。整个项目用到了淘宝弹性布局方案lib-flexible。它会给整个项目中所有css的px单位自动转化为rem。实现适配，但是通过style设置的px单位却无能为力。所以官方的实例<van-popup v-model="show" position="top" :style="{ height: '20%' }" />设置高度以后。会发现在iphonex上和iphone6/7/8表现差异很大。其实解决的办法也很简单。只要避免通过style暴力设置pup弹出层高度即可。删除style设置高度的代码。直接利用组件本身的高度
5 checkbox隐藏的问题
checkbox官方的api有说明：
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
| click | 点击复选框时触发 |
如果需要做一个类似全选的功能，如图：
最顶上左侧箭头处。给checkbox按钮添加点击事件。结合官方全选和反选的demo，
<van-checkbox v-model="checkAllFlag" checked-color='var(--themeBgColor)' @change='checkAll'>{{supplierCode}}</van-checkbox>
checkAll(){
console.log('this.checkallFlag:',this.checkAllFlag)
this.$refs[this.supplierCode].toggleAll(this.checkAllFlag）
}
会发现全选和反选是界面上的效果和实际逻辑是相反的。也就说选择全选按钮。下面的商品是全不选。反正。这时候。我们需要改click事件为change事件。也就说官方说的“当绑定值变化时触发的事件“，然后效果正常。
5： 为什么vant list组件实现上拉加载--分页。会出现连续触发的问题？
我们需要知道几个上限：
（1）如果后端返回的数据为一一个空数组。则说明已经没有数据了。此时我们需要通过list的finished=true表示已经没有更多了。
（2）每次分页，我们的数据都会添加到一个数组中，当改数组的长度大于或者等于后端返给我们的total值时，则表示已经加载了全部所有的数据。此时我们需要把finished给设置成true
只需要对这两个临界点做finished控制。就能避免load事件的重复请求。
之前代码如下：
if(this.listData==0||this.listData.length>=total){
this.finished = true;
}else{
this.listData.concat(list)
}
发现没有问题：
也可以写成这样：
this.list=this.list.concat(arr)
if(this.list.length>=total){
this.finished=true
}
6 页面跳转与toast弹出的问题：
问题呈现：有一个答题项目。每次答题如果回答正确则进入下一题。
核心逻辑如下
问题就在页面会跳转。但是this.$toast({message:"答题成功",type:"success"})无法执行。
个人推测this.$toast底层采用了异步机制。导致this.$router.push({name:"question",query:{pageNum:this.pageNum}})先执行。也就是页面跳转在先。而页面栈的更新导致destoryed生命周期触发。进而导致this.$toast()无法执行。
修复办法。让页面跳转在$.toast之后执行。通过setTimeout让页面跳转的逻辑延迟执行，进入事件队列
正确办法：
