Hi, nice to meet you
The world is big, and the wonderful thing is that we meet here.
Welcome to Tianyu Creative Music School, a gathering place for professional people.
Website:Youzan. Making. IO/vant / # / useful – C…
01
The Vant plug-in PullRefresh drop-down refresh will refresh as it scrolls
FAQ:
1. The parent container does not exist overflow: hidden
2. When using the Refresh plugin, if the style of overfow-y:scorll is the parent of the van-Refresh component, the selected scroll bar is the parent of the page element.
Solution:
1. Add overflow: Hidden to the parent container
2. Set the correct height of the parent component of the van-Refresh component so that the scroll bar does not appear in the body height.
.van-pull-refresh { height: 100vh; overflow: auto ! important; }Copy the codeCan only part of the screen be pulled down before the PullRefresh content fills the screen? By default, the height of the drop-down area is the same as the height of the content. To keep the drop-down area full screen at all times, you can set the PullRefresh to a minimum height equal to the size of the screen:
<van-pull-refresh style=”min-height: 100vh;” />
Vant UI website
02
Vant van-icon Uses custom ICONS
Iconfont icon library: www.iconfont.cn/
Search for your favorite icon to add to the library
Click on my icon library to select the corresponding item and click OK
Click update code
Copy the CSS code into the Vue project
Importing locations into a project is important to configure HTTP or HTTPS for packaging
It can be in app. vue or main.js, which I configured in main.js
Use in vUE files
<template> <div id="tabbar"> <! <van-tabbar route> <van-tabbar-item icon="home-o" to="/"> bookshelf </van-tabbar-item> <van-tabbar-item to="/bookShop" > <div class="customTabbarItem"> <! <van-icon class="iconfont iconicon_huabanfuben icon_margin"/> <span> </span> </div> </van-tabbar-item> <van-tabbar-item to="/bookClass" > <div class="customTabbarItem"> <! - the introduction of the custom icon - > < van - icon class = "iconfont iconleimupinleifenleileibie icon_margin" / > < span > classification < / span > < / div > </van-tabbar-item> <van-tabbar-item icon="user-o" to="/profile"> My </van-tabbar-item> </van-tabbar> </div> </template>Copy the code03
Vant Swiper rotation map fillet swiper changes to a right Angle and then back to fillet (iOS)
#template部分
<van-pull-refresh v-model="isLoading" @refresh="init" :disabled="open" :style="{backgroundColor: bgColor}" class="pull-container">
<!-- 轮播图 -->
<div class="cu-swipe" v-if="bannerList.length>0" >
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(banner, index) in bannerList" :key="index" @click="toJump(banner)">
<!-- 轮播图去掉 lazy-load 属性 -->
<van-image :src="STATIC_HOST + banner.imageLink"/>
</van-swipe-item>
</van-swipe>
</div>
<div class="book-list-container">
<!-- 主编推荐 -->
<div class="book-recommend-wrapper">
<div class="recommend-header">
<div class="recommend-header-left"><h1>主编推荐</h1></div>
<div class="recommend-header-right">
<div class="recommend-icon-item">
<van-icon name="star" class="icon_margin" />
<span>品质</span>
</div>
<div class="recommend-icon-item">
<van-icon name="star" class="icon_margin"/>
<span>人气</span>
</div>
<div class="recommend-icon-item last">
<van-icon name="star" class="icon_margin"/>
<span>兴趣</span>
</div>
</div>
</div>
<van-row type="flex" justify="space-between" v-if="recommendList.length>0">
<van-col span="7" v-for="(recommend, index) in recommendList">
<router-link :key="recommend.id" :to="{path: '/bookDetail', query:{bookId: recommend.id}}">
<van-image class="recommend-cover" lazy-load :src="STATIC_HOST + recommend.coverImg" />
<span class="recommend-title">{{recommend.title}}</span>
</router-link>
</van-col>
</van-row>
</div>
<!-- 高分神作 -->
<div class="book-eight-wrapper">
<van-row class="book-eight-wrapper-header">
<van-col span="24" class="header-left"><h1>高分神作</h1></van-col>
</van-row>
<van-row type="flex" justify="space-between" v-for="(i) in 2">
<van-col span="5" v-for="(highScore, index) in highScoreList" v-if=" i===1 && index < 4 ">
<router-link :key="highScore.id" :to="{path: '/bookDetail', query:{bookId: highScore.id}}">
<van-image class="book-eight-wrapper-cover" lazy-load :src="STATIC_HOST + highScore.coverImg" />
<span class="book-eight-wrapper-title">{{highScore.title}}</span>
<span class="book-eight-wrapper-score">9.7<span class="unit">分</span></span>
</router-link>
</van-col>
<van-col span="5" v-for="(highScore, index) in highScoreList" v-if=" i===2 && index >= 4">
<router-link :key="highScore.id" :to="{path: '/bookDetail', query:{bookId: highScore.id}}">
<van-image class="book-eight-wrapper-cover" lazy-load :src="STATIC_HOST + highScore.coverImg" />
<span class="book-eight-wrapper-title">{{highScore.title}}</span>
<span class="book-eight-wrapper-score">9.7<span class="unit">分</span></span>
</router-link>
</van-col>
</van-row>
</div>
<!--潜力新书-->
<div class="book-eight-wrapper">
<div class="book-eight-wrapper-header">
<div class="header-left"><h1>潜力新书</h1></div>
<div class="header-right">
<a @click="handleMore('潜力新书','SERIAL')">
<span>更多</span>
<span><van-icon class="iconfont icongengduo"/></span>
</a>
</div>
</div>
<van-row type="flex" justify="space-between" v-for="(i) in 2">
<van-col span="5" v-for="(item, index) in newVos" v-if=" i===1 && index < 4 ">
<router-link :key="item.id" :to="{path: '/bookDetail', query:{bookId: item.id}}">
<van-image class="book-eight-wrapper-cover" lazy-load :src="STATIC_HOST + item.coverImg" />
<span class="book-eight-wrapper-title">{{item.title}}</span>
<span class="book-eight-wrapper-label">{{processLabelInfo(item.labelInfo)}}</span>
</router-link>
</van-col>
<van-col span="5" v-for="(item, index) in newVos" v-if=" i===2 && index >= 4">
<router-link :key="item.id" :to="{path: '/bookDetail', query:{bookId: item.id}}">
<van-image class="book-eight-wrapper-cover" lazy-load :src="STATIC_HOST + item.coverImg" />
<span class="book-eight-wrapper-title">{{item.title}}</span>
<span class="book-eight-wrapper-label">{{processLabelInfo(item.labelInfo)}}</span>
</router-link>
</van-col>
</van-row>
</div>
<!--完结优选-->
<div class="book-eight-wrapper">
<div class="book-eight-wrapper-header">
<div class="header-left"><h1>完结优选</h1></div>
<div class="header-right">
<a @click="handleMore('爆款完本','FINISH')">
<span>更多</span>
<span><van-icon class="iconfont icongengduo"/></span>
</a>
</div>
</div>
<van-row type="flex" justify="space-between" v-for="(i) in 2">
<van-col span="5" v-for="(item, index) in finishVos" v-if=" i===1 && index < 4 ">
<router-link :key="item.id" :to="{path: '/bookDetail', query:{bookId: item.id}}">
<van-image class="book-eight-wrapper-cover" lazy-load :src="STATIC_HOST + item.coverImg" />
<span class="book-eight-wrapper-title">{{item.title}}</span>
<span class="book-eight-wrapper-label">{{processLabelInfo(item.labelInfo)}}</span>
</router-link>
</van-col>
<van-col span="5" v-for="(item, index) in finishVos" v-if=" i===2 && index >= 4">
<router-link :key="item.id" :to="{path: '/bookDetail', query:{bookId: item.id}}">
<van-image class="book-eight-wrapper-cover" lazy-load :src="STATIC_HOST + item.coverImg" />
<span class="book-eight-wrapper-title">{{item.title}}</span>
<span class="book-eight-wrapper-label">{{processLabelInfo(item.labelInfo)}}</span>
</router-link>
</van-col>
</van-row>
</div>
</div>
</van-pull-refresh>
#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;
}
}
}
}
Copy the codeBecause there’s so much content on the page, I’m just going to paste the main part of the page instead of just copying and pasting it
04
Vue Vant UI Vant-Tab component style adjustment
<van-tabs V-model ="active" sticky title-active-color="#144a9e" // Select the following color for the tabs @click="tabClick">Copy the codeChange the van-tab border color to prefix the class name with the depth operator: /deep/
/deep/.channel-tabs { .van-tab { border-right: 1px solid #edeff3; }}Copy the codeChange the van-tab: width and height text color size, bottom bar: width and height color position
. Van-tabs__nav {// The parent element defaults to 15px, which can be done without the padding-bottom: 0; } .van-tabs__line { bottom: 8px; width: 31px ! important; height: 6px; background-color: #3296fa; }Copy the codeAt present temporarily encounter some of the above must write follow-up encounter in addition
This article uses the article synchronization assistant to synchronize