vue3.0 实战 滚动案例

<template>

  <div class="home">

    <div class="all">

      <ul>

        <li v-for="(item,index) in num" :key="index" :class="[ index===IndexActive ? 'active' : '' ]">{{item}}</li>

      </ul>

 

    </div>

  </div>

</template>

<script>

import { reactive, ref, toRefs, onMounted } from 'vue'

export default {

  setup () {

    const liList = reactive({

      num: ['大香蕉', '大橙子', '大苹果', '大鸭梨', '大罗卜', '大子辰', '大笨蛋', '大冬瓜']

    })

    const timer = ref(null)

    const IndexActive = ref(0)

    const getTimer = () => {

      IndexActive.value++

      if (IndexActive.value === liList.num.length) {

        IndexActive.value = 0

      }

    }

    onMounted(() => {

      console.log('mounted!')

      timer.value = setInterval(getTimer, 1000)

    })

    return {

      ...toRefs(liList),

      timer,

      IndexActive

    }

  }

}

</script>

<style scoped lang="less">

.home {

  .all {

    width: 300px;

    height: 500px;

    background-color: #999;

    border: 1px solid #999;

    margin: 0 auto;

    ul{

      list-style: none;

      margin: 0;

      padding: 0;

      li{

        height: 40px;

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #000;

      }

      .active {

        background-color: #fff;

        color: #999;

      }

    }

  }

}

 

</style>