Vant 框架已经给我们自带了对应的布局组件，我们直接的使用即可。
对应的文档地址为：https://youzan.github.io/vant/#/zh-CN/col
相关文档API说明：
image.png
顶部的搜索布局效果为：
image.png
效果的分析，划分为三个左中右三个部分进行布局。我们可以使用对于的Layout 布局来做对应的布局：
官网解说：
对于Layout 组件，它提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比
此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同
所以我们设计的组件布局的使用可以按24列栅格化来放置对应的组件。
<!-- 搜索区 -->
<van-row gutter="20" class="row-1">
<van-col span="3" class="cols">
<a href="#">登录</a>
</van-col>
<van-col span="19" class="cols">
<form action="/">
<van-search
class="search"
style="background-color:white;height:35px;border-radius:22px;"
placeholder="搜索：衣服"
/>
</form>
</van-col>
<van-col span="2" class="cols">
<van-icon name="qr" class="classfic"/>
</van-col>
</van-row>
上述代码加上之后，我们观察页面效果为：
image.png
仔细观察，搜索组件的内部的底色不是白色的，我们需要修改为白色，这个是时候我们就需要定制我们的对应的组件样式。
这里我们使用的到时关于Vue深度选择器的说法。
1：首先我们需要找需要修改的组件的样式
image.png
2：找到对应的样式
image.png
3：然后再对应的样式处理（需要注意 /deep/ 这个，必须有，否则也是无效的）
<style lang="less" scoped>
@import url('../assets/css/home.less');
/*!*深度选择器的使用*!*/
/deep/ .van-search__content {
background-color: #fff;
}
</style>
4：再观察样式变化
image.png
5：查看最终效果为
image.png
完整代码为：
<template>
<div id="app">
<!-- 搜索区 -->
<van-row gutter="20" class="row-1">
<van-col span="3" class="cols">
<a href="#">登录</a>
</van-col>
<van-col span="19" class="cols">
<form action="/">
<van-search
class="search"
style="background-color:white;height:35px;border-radius:22px;"
placeholder="搜索：衣服"
/>
</form>
</van-col>
<van-col span="2" class="cols">
<van-icon name="qr" class="classfic"/>
</van-col>
</van-row>
<van-tabbar active-color="#07c160" v-model="active">
<van-tabbar-item icon="wap-home">首页</van-tabbar-item>
<!--<van-tabbar-item icon="pending-evaluate">社区</van-tabbar-item>-->
<van-tabbar-item icon="shopping-cart" info="5">购物车</van-tabbar-item>
<van-tabbar-item icon="shopping-cart" info="5">购物车</van-tabbar-item>
<van-tabbar-item icon="contact" info="2">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import {
Tabbar,
TabbarItem,
Search,
Row, Col, Icon,
} from 'vant';
export default {
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem,
[Search.name]: Search,
[Row.name]: Row,
[Col.name]: Col,
[Icon.name]: Icon,
},
data() {
return {
active: 0
};
},
methods: {}
};
</script>
<style lang="less" scoped>
@import url('../assets/css/home.less');
/*!*深度选择器的使用*!*/
/deep/ .van-search__content {
background-color: #fff;
}
</style>
不过再适配到浏览器上面的时候发现，有滑动的边框出来，应该对应的组件有超过了对应的宽度，引起了越界！
最后修改对应的样式为：
@fonts: 16px;
#app {
color: #585c64;
.row-1 {
height: 35px;
margin-top: 8px;
font-size: 15px;
}
.contain {
overflow: scroll;
height: 600px;
}
.cols a {
display: block;
width: 30px;
height: 35px;
line-height: 35px;
margin-left: 10px;
text-align: center;
}
.search {
}
.classfic {
display: block;
width: 30px;
text-align: center;
height: 35px;
line-height: 35px;
margin-left: 1px;
font-size: 20px;
}
}
对应的布局代码为：
<template>
<div id="app">
<!-- 搜索区 -->
<van-row class="row-1">
<van-col span="3" class="cols">
<a href="#">登录</a>
</van-col>
<van-col span="19" class="cols">
<form action="/">
<van-search
class="search"
style="background-color:white;height:35px;border-radius:22px;"
placeholder="搜索：衣服"
/>
</form>
</van-col>
<van-col span="2" class="cols">
<van-icon name="qr" class="classfic"/>
</van-col>
</van-row>
<van-tabbar active-color="#07c160" v-model="active">
<van-tabbar-item icon="wap-home">首页</van-tabbar-item>
<!--<van-tabbar-item icon="pending-evaluate">社区</van-tabbar-item>-->
<van-tabbar-item icon="shopping-cart" info="5">购物车</van-tabbar-item>
<van-tabbar-item icon="shopping-cart" info="5">购物车</van-tabbar-item>
<van-tabbar-item icon="contact" info="2">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import {
Tab, Tabs,
Tabbar,
TabbarItem,
Search,
Row, Col, Icon,
} from 'vant';
export default {
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem,
[Search.name]: Search,
[Row.name]: Row,
[Col.name]: Col,
[Icon.name]: Icon,
},
data() {
return {
active: 0
};
},
methods: {}
};
</script>
<style lang="less" scoped>
@import url('../assets/css/home.less');
/*!*深度选择器的使用*!*/
/deep/ .van-search__content {
background-color: #fff;
}
</style>
然后再微信浏览器内打开查看，没有滑动的反效果了！！
网友评论