01

vant 插件PullRefresh下拉刷新 会出现滚动就刷新的情况

常见问题:

1.父级容器不存在overflow：hidden

2.当使用Refresh插件时，如果存在当van-refresh组件的父级overfow-y:scorll 的样式时，选中的滚动条为父级元素，此时当body内部容器撑开页面元素时（也就是body存在滚动条时）

解决方式:

1.给父级容器加上overflow:hidden

2.设置van-refresh组件的父级组件的正确高度，使body的高度不会出现滚动条。

.van-pull-refresh {
     height: 100vh;
     overflow: auto !important;
}

PullRefresh 的内容未填满屏幕时，只有一部分区域可以下拉？默认情况下，下拉区域的高度是和内容高度保持一致的，如果需要让下拉区域始终为全屏，可以给 PullRefresh 设置一个与屏幕大小相等的最小高度：

vant ui 官网

02

vant van-icon使用自定义图标

iconfont图标库： https://www.iconfont.cn/

搜索自己喜好的图标 添加入库

点击我的图标库 选择对应的项目 点击确定

点击更新代码

复制css代码到 Vue项目中

引入到项目中的位置 切记打包时 要配置http或https的形式

可以在App.vue 或main.js 我这里是配置在main.js中

vue文件中的使用

03

vant swiper 轮播图圆角滑动变会变成直角然后再回到圆角(iOS)

#template部分
<!-- 轮播图 -->

                <!-- 轮播图去掉 lazy-load 属性  -->

            

                <!-- 主编推荐 -->
                

                    

                        
主编推荐
                        

                            

                                品质
                            
                            

                                人气
                            
                            

                                兴趣
                            
                        
                    
                    {{recommend.title}}
                            

                <!-- 高分神作  -->
                

                    
高分神作{{highScore.title}}
                                9.7分
                            {{highScore.title}}
                                9.7分
                            

                <!--潜力新书-->
                

                    

                        
潜力新书
                        

                            
                                更多
                                
                            
                        
                    
                    {{item.title}}
                                {{processLabelInfo(item.labelInfo)}}
                            {{item.title}}
                                {{processLabelInfo(item.labelInfo)}}
                            

                <!--完结优选-->
                

                    

                        
完结优选
                        

                            
                                更多
                                
                            
                        
                    
                    {{item.title}}
                                {{processLabelInfo(item.labelInfo)}}
                            {{item.title}}
                                {{processLabelInfo(item.labelInfo)}}
                            

            
        
#css部分
.pull-container {
        position: relative;
        min-height: 100vh;
        width: 100%;
        overflow-y: auto; //解决IOS 动态变化时 先变直角在变圆角的处理方案
        border: none;
        .van-hairline--bottom:after {
            border-bottom-width: 0;
        }
        .cu-swipe{
            margin: 0.533rem 0.533rem 0 0.533rem; //可以单独改变元素的上，右，下，左边距，也可以一次改变所有的属性。
            -webkit-border-radius: 0.267rem 0.267rem 0 0;
            -moz-border-radius: 0.267rem 0.267rem 0 0;
            overflow-y: auto; //解决IOS 动态变化时 先变直角在变圆角的处理方案
            .van-swipe-item {
                width: 100%;
                height: 4rem;
                font-size: 0.533rem;
                text-align: center;
                transform: translateY(0); //解决IOS 动态变化时 先变直角在变圆角的处理方案
                img{
                    display:block;
                    vertical-align:top;
                    width: 100%;
                    height: 4rem;
                }
            }
        }
    }

由于页面内容太多 我只粘贴主要部分不用直接上来就复制粘贴

04

vue vant ui vant-tab 标签页组件样式调整

改变van-tab边框颜色 在类名前加上深度操作符: /deep/

/deep/.channel-tabs {
      .van-tab {
        border-right: 1px solid #edeff3;
      }
    }

改变van-tab 标签:宽高 文字颜色大小, 底部条:宽高 颜色 位置

.van-tabs__nav {　　//父元素默认底边15px 可以去掉
  padding-bottom: 0;
}
.van-tabs__line {
  bottom: 8px;
  width: 31px !important;
  height: 6px;
        background-color: #3296fa;
}

目前暂时遇到以上的一些必写的 后续遇到在补充