Cpp五条

这个屌丝很懒，什么也没留下！

热门标签

vue组件库vant-ui和iview组件库使用中遇到的问题小结_van-col 垂直居中

作者：Cpp五条 | 2024-06-17 11:45:16

踩

van-col 垂直居中

1 最近项目需要临时做一个调查问卷页面。考虑到性能和复杂度，决定通过使用cdn方式编写该页面。

效果如下：

移动端采用vant.ui

遇到的问题：

（1）通过cdn方式进行开发的时候，引入官网的链接。查看network会报302错误。

解决的办法：复制该链接，下载到本地，重新链接本地地址

（2）引入链接也有讲究，script标签最好在写在body部分dom，而不能写在head里。这涉及到生命周期的问题和js引擎解析顺序问题。所以正确写法如下：

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>

</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，

示例：

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让页面跳转的逻辑延迟执行，进入事件队列

正确办法：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/731035