VUE的小需求——导航栏切换——下拉加载分页加载

VUE的导航栏切换小需求

view部分

                <div v-if="active_Tab == 0">
                    <!-- 分类导航栏 -->
                    <div class="classList">
                        <div class="_nav" style="overflow-x: scroll;">
                            <ul class="_nav_ul">
                                <li
                                    v-for="(item,key,index) in navList"
                                    :name="index"
                                    :key="index"
                                    class="_nav_li"
                                    :class="{'_active':activeTab == key}"
                                    @click="handleChange(item,key)"
                                >{{key}}</li>
                            </ul>
                        </div>
                    </div>
                    <!--列表 -->
                    <Col class="col1 cl">
                    <Col
                        class="col"
                        span="6"
                        v-for="(list,key,index) in changeTab"
                        :key="index"
                    >
                    <div class="listLeft">
                        <span @click="goPlay(key,list)">
                            <img :src="list.imgSrc">
                            <h3>{{ list.cnname }}</h3>
                            <p>{{ list.cycle? list.cycle + '分钟': '' }}</p>
                        </span>
                    </div>
                    </Col>
                    </Col>
                </div>

javascript部分

        handleChange(item, idx) {
            this.activeTab = idx;
        },

CSS部分

._nav {
    width: 100%;
    height: 40px;
    overflow-x: scroll;
    ._nav_ul {
        display: inline-block;
        // overflow-x: scroll;
        // overflow-y: visible;
        width: 100%;
        white-space: nowrap;
        text-align: left;
        height: 40px;
        line-height: 40px;
        li {
            border: 1px solid #f2ebe9;
            display: inline-block;
            float: none !important;
            padding: 0 20px;
            position: relative;
            cursor: pointer;
            z-index: 3;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            font-size: 14px;
            height: inherit;
            line-height: inherit;
            border-bottom: 2px solid #f2ebe9;
            color: #000000;
        }
        ._active {
            color: #fb6a00;
            border-bottom: 2px solid #fb6a00;
        }
    }
}

VUE下拉加载分页加载

iview的部分

 <div
        class="cont_tabBody"
        ref="wrap"
        @scroll.passive="loadData()"
      >

methods部分

    loadData() {
      const wrap = this.$refs.wrap;
      //滚动高度 >= 滚动区域的高度 - 容器的高度 - 差值
      if (wrap.scrollTop >= wrap.scrollHeight - wrap.offsetHeight - 20) {
        if (this.timer) {
          clearTimeout(this.timer);
          this.timer = null;
        }

        this.timer = setTimeout(async () => {
          this.currentPage++; //页数+1
          const url = "/cellphone_agentcenter.shtml";
          const obj = {
            cellphone: 1,
            token: this.$store.state.user.token,
            p: this.currentPage
          };
          if (this.isSubUser) {
            obj.uid = this.subUserId;
          }
          const { data } = await this.$http.post(url, qs.stringify(obj));
          this.showAgencyObjs = {
            ...this.showAgencyObjs,
            ...data.result.result
          };
        }, 100);
      }
    },