在上一个章节中，我们的已经把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>