当前位置：首页 > article >正文

uni-app文章列表制作⑧

article 2025/1/18 20:16:54

文章目录

- 十二、文章列表制作-容器组件
- - - 一、定义 articleList 组件
    - 二、选项卡自动进行位置调整

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

一、定义 articleList 组件

使用 swiper 组件实现滚动效果

https://uniapp.dcloud.io/component/swiper

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

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

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

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>

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

选项卡点击事件绑定

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

swiper 制定 current 属性，值为 activeIndex

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>

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

scroll-view 组件添加属性 scroll-with-animation 及 scroll-left 属性 https://uniapp.dcloud.io/component/scroll-view
动态设置 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>