在上一个章节中，我们的已经把Tab导航组件应用上了，那接下来就是每个Tab页面下对应的不同的页面了。
今天暂且再Tab页面下内嵌对应的PullRefresh 下拉刷新组件和Swipe 轮播广告两个组件。
最终效果为：
GIF333.gif
首先我的Tab下都可以进行下拉刷新页面，那么我们则需要再Tab内嵌的子页面的外层嵌套我们的PullRefresh 下拉刷新组件。
1:引入PullRefresh 下拉刷新组件和即将用到的Swipe 轮播广告组件
image.png
2：使用对于的PullRefresh 下拉刷新组件
image.png
3：配置相关的属性值
image.png
4：通过判断对应的标题文字来展示对应Tab内嵌的子页面
image.png
5：使用Swipe 轮播广告展示相关的广告图片
<div v-if="title[index]== '今日推荐'" class="contain">
<!--内容 {{ title[index] }}-->
<!-- 轮播组件 -->
<van-row>
<van-col span="24">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images_jinri" :key="index">
<img v-lazy="image" style="width:100%;height:160px;"
@click.stop="redirect('/goods/id_0')"/>
</van-swipe-item>
</van-swipe>
</van-col>
</van-row>
</div>
6：配置Swipe 轮播广告展示相关的广告图片来源
image.png
注意事项：
因为我们再Swipe 轮播广告使用了懒加载图片的方法，所以还需要配置懒加载的图片
方法是需要再main.js里引入对应的懒加载库
image.png
7：修改轮播图下的圆点颜色（使用深度选择器）
image.png
8：最终效果为：
GIF333.gif
完整的代码为
<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-row>
<van-col span="24">
<van-tabs @click="onClick" sticky title-active-color="#E32DAB" color="#E32DAB" :line-width="100"
:line-height="2">
<van-tab v-model="active" v-for="index in 7" :title="title[index]" :key="index.id" class="tab">
<!--内容 {{ index }}-->
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<!--根据标题来匹配显示对于的组件内的内容信息-->
<!--今日推荐区域-->
<div v-if="title[index]== '今日推荐'" class="contain">
<!--内容 {{ title[index] }}-->
<!-- 轮播组件 -->
<van-row>
<van-col span="24">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images_jinri" :key="index">
<img v-lazy="image" style="width:100%;height:160px;"
@click.stop=""/>
</van-swipe-item>
</van-swipe>
</van-col>
</van-row>
</div>
<div v-if="title[index]== '时尚'" class="contain">
<!--内容 {{ title[index] }}-->
<!-- 轮播组件 -->
<van-row>
<van-col span="24">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images_shichang" :key="index">
<img v-lazy="image" style="width:100%;height:160px;"
@click.stop=""/>
</van-swipe-item>
</van-swipe>
</van-col>
</van-row>
</div>
</van-pull-refresh>
</van-tab>
</van-tabs>
</van-col>
</van-row>
<van-tabbar active-color="#07c160" v-model="active_tanb_bootem">
<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,
Toast,
PullRefresh,
Swipe, SwipeItem,
} 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,
[PullRefresh.name]: PullRefresh,
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem,
},
data() {
return {
title: ['', '今日推荐', '时尚', '美妆', '家电', '家居', '国际', '生活'],
active: 0,
active_tanb_bootem: 0,
isLoading: false,
images_jinri: [
"https://a2.vimage1.com/upload/flow/2018/06/12/50/15287856410421.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/06/29/15282588215380.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/11/129/15287110698394.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/11/79/15286841592012.jpg"
],
images_shichang: [
"https://a3.vimage1.com/upload/flow/2018/06/12/65/15287673095242.jpg",
"https://a3.vimage1.com/upload/flow/2018/06/11/169/15287297288138.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/11/78/15287120642222.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/08/161/15284659187259.jpg",
"https://a2.vimage1.com/upload/flow/2018/06/08/119/15284419569224.jpg"
]
};
},
methods: {
onClick(index, title) {
Toast('点击结算' + index);
},
onRefresh() {
setTimeout(() => {
Toast('刷新成功');
this.isLoading = false;
}, 500);
},
}
};
</script>
<style lang="less" scoped>
@import url('../assets/css/home.less');
/*!*深度选择器的使用*!*/
/deep/ .van-search__content {
background-color: #fff;
}
/deep/ .van-swipe__indicator--active {
background-color: #E32DAB;
}
</style>
