uni-app文章列表制作⑧

十二、文章列表制作-容器组件

一、定义 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 设定