在上一個(gè)章節(jié)中，我們的已經(jīng)把Tab導(dǎo)航組件應(yīng)用上了，那接下來(lái)就是每個(gè)Tab頁(yè)面下對(duì)應(yīng)的不同的頁(yè)面了泼掠。
今天暫且再Tab頁(yè)面下內(nèi)嵌對(duì)應(yīng)的PullRefresh 下拉刷新組件和Swipe 輪播廣告兩個(gè)組件。
最終效果為：
GIF333.gif
首先我的Tab下都可以進(jìn)行下拉刷新頁(yè)面亿扁，那么我們則需要再Tab內(nèi)嵌的子頁(yè)面的外層嵌套我們的PullRefresh 下拉刷新組件。
1:引入PullRefresh 下拉刷新組件和即將用到的Swipe 輪播廣告組件
image.png
2：使用對(duì)于的PullRefresh 下拉刷新組件
image.png
3：配置相關(guān)的屬性值
image.png
4：通過(guò)判斷對(duì)應(yīng)的標(biāo)題文字來(lái)展示對(duì)應(yīng)Tab內(nèi)嵌的子頁(yè)面
image.png
5：使用Swipe 輪播廣告展示相關(guān)的廣告圖片
<div v-if="title[index]== '今日推薦'" class="contain">
<!--內(nèi)容 {{ 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 輪播廣告展示相關(guān)的廣告圖片來(lái)源
image.png
注意事項(xiàng)：
因?yàn)槲覀冊(cè)賁wipe 輪播廣告使用了懶加載圖片的方法鸟廓，所以還需要配置懶加載的圖片
方法是需要再main.js里引入對(duì)應(yīng)的懶加載庫(kù)
image.png
7：修改輪播圖下的圓點(diǎn)顏色（使用深度選擇器）
image.png
8：最終效果為：
GIF333.gif
完整的代碼為
<template>
<div id="app">
<!-- 搜索區(qū) -->
<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>
<!-- 標(biāo)簽區(qū)域 -->
<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">
<!--內(nèi)容 {{ index }}-->
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<!--根據(jù)標(biāo)題來(lái)匹配顯示對(duì)于的組件內(nèi)的內(nèi)容信息-->
<!--今日推薦區(qū)域-->
<div v-if="title[index]== '今日推薦'" class="contain">
<!--內(nèi)容 {{ 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]== '時(shí)尚'" class="contain">
<!--內(nèi)容 {{ 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">首頁(yè)</van-tabbar-item>
<!--<van-tabbar-item icon="pending-evaluate">社區(qū)</van-tabbar-item>-->
<van-tabbar-item icon="shopping-cart" info="5">購(gòu)物車</van-tabbar-item>
<van-tabbar-item icon="shopping-cart" info="5">購(gòu)物車</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: ['', '今日推薦', '時(shí)尚', '美妝', '家電', '家居', '國(guó)際', '生活'],
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('點(diǎn)擊結(jié)算' + 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>
