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 设定

原文地址：https://blog.csdn.net/qq_41988669/article/details/143691555

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！