文章列表制作-容器组件

一、定义articleList组件

1. 使用swiper组件实现滚动效果 https://uniapp.dcloud.io/component/swiper

   1. swiperItem数量动态话，当前的swiper数量应该与选项卡的数量相同

      获取选项卡的数量值，根据选项卡数量进行swiperItem渲染,index界面进行labelList传递

      		<ArticleList :labelList="labelLIst" class="list-container"></ArticleList>
      

   2. ArticleList内根据swiper数量进行swiperItem渲染

       <swiper class="swiper-container">
          <swiper-item v-for="(item,index) in labelList" :key="index">
            <view class="swiper-item uni-bg-red">
              <list-item></list-item>
            </view>
          </swiper-item>
        </swiper>
      

2. 选项卡与swiper组件联动效果实现

   1. 选项卡点击事件绑定

      发送事件，调整activeIndex值，将activeIdnex值调整为父组件传递值

      swiper制定current属性，值为activeIndex

   2. swiper change事件监听，实现改变activeIndex属性

       <swiper class="swiper-container" :current="activeIndex" @change="changCurrentIndex">
          <swiper-item v-for="(item,index) in labelList" :key="index">
            <view class="swiper-item uni-bg-red">
              <list-item></list-item>
            </view>
          </swiper-item>
        </swiper>
        
      <script>
        	 methods:{
            changeCurrentIndex(e) {
                const {current}  = e.detail;
                this.$emit('changeCurrentIndex',current)
           	 }
        		}
      </script>
      

二、选项卡自动进行位置调整

1. scroll-view 组件添加属性 scroll-with-animation及 scroll-left 属性 https://uniapp.dcloud.io/component/scroll-view

2. 动态设置scrollintoview属性，为每一项添加ID属性进行跳转切换

    <scroll-view class="tab-scroll" scroll-x="true" :scroll-into-view="currentIndex" :scroll-with-animation="true">
         <view class="tab-scroll-box">
           <view :id="`item${index}`" @click="navClickFn(index)" :class="{active:activeIndex === index}" v-for="(item, index) in labelList" :key="index" class="tab-scroll-item">{{ item.name}}</view>
         </view>
       </scroll-view>
   
   <script>
      watch:{
   	  activeIndex(index){
   		this.currentIndex = `item${index}`
   	  }
     },
     data() {
       return {
   		currentIndex:''
       }
     }
   </script>
   

3. 通过watch属性监听currIndex值改变，进行currentIndex设定