element plus框架中手机左右滑动如何切换Carousel 走马灯的内容，包括AQI等级

本文链接：https://blog.csdn.net/u010782109/article/details/131698738
本文介绍如何在使用Element Plus框架的移动端应用中，通过左右滑动操作来切换Carousel组件中的内容，同时展示AQI（空气质量指数）等级。涉及到的技术包括JavaScript、TypeScript以及前端开发实践。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
1.先给最全的代码 最后详细解释
//HomePage.vue 页面
<template>
    <div class="block text-center" trigger="hover"  style="overflow:  scroll;">
      <el-carousel ref="myRef" height="auto" :autoplay="false" :initial-index="clicknum" @change="chfun">
        <el-carousel-item style=" height: calc(100vh - 112px);min-height: 665px; overflow:  scroll;" v-for="item in items" :key="item">
            <el-row style="color:#FFF; text-align: left;margin-top: 30px;">
                <el-col :span="20"><span style="padding-left: 20px; font-size: 22px;">{
   
   {
   
   item.areaName}}  <span style="font-size: 12px;">{
   
   {
   
    item.quyudex }}</span> </span></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="12"><span style="padding-left: 20px;font-size: 12px;">空气质量指数/AQI</span></el-col>
            </el-row>
            <el-row style="color:#FFF; text-align: center;margin-top: 10px;">
                <el-col :span="24"><span style="font-size: 38px; font-weight: 600;"  :style="{color:item.AQIcolor}">{
   
   {
   
   item.AQI}}</span></el-col>
                <el-col :span="24"><span style="font-size: 26px;font-weight: 600; ">{
   
   {
   
   item.name}}</span></el-col>
                <el-col :span="24"><span style="font-size: 18px;">首要污染物：{
   
   {
   
   item.CriticalPollutants.replace("PM10","颗粒物（PM₁₀）").replace("PM25","颗粒物（PM₂.₅）").replace("SO2","二氧化硫（SO₂）").replace("CO","一氧化碳（CO）").replace("NO2","二氧化氮（SO₂）").replace("O3_8H","臭氧（O₃）").replace("O3","臭氧（O₃）").replace("_",",")}}</span></el-col>
                <el-col :span="24"><span style="font-size: 14px;">更新时间：{
   
   {
   
   item.datetime}}</span></el-col>
            </el-row>

            <el-row class="row-bg" justify="space-evenly" style="color:#FFF;font-size: 14px; margin-top: 10px;">
                <el-col :span="6" style="display: flex; justify-content: center;">
                    <div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
                       <div style="text-align: center;line-height: 34px;"> {
   
   {
   
   item.PM25}}</div>
                       <div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.pm25color}"></div>
                       <div style="text-align: center;line-height: 30px;">PM₂.₅</div>
                    </div>
                </el-col>
                <el-col :span="6" style="display: flex; justify-content: center;">
                    <div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
                       <div style="text-align: center;line-height: 34px;"> {
   
   {
   
   item.PM10}}</div>
                       <div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.pm10color}"></div>
                       <div style="text-align: center;line-height: 30px;">PM₁₀</div>
                    </div>
                </el-col>
                <el-col :span="6" style="display: flex; justify-content: center;">
                    <div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
                       <div style="text-align: center;line-height: 34px;"> {
   
   {
   
   item.SO2}}</div>
                       <div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.so2color}"></div>
                       <div style="text-align: center;line-height: 30px;">SO₂</div>
                    </div>
                </el-col>
            </el-row>
            <el-row class="row-bg" justify="space-evenly" style="color:#FFF;font-size: 14px; margin-top: 20px;">
                <el-col :span="6" style="display: flex; justify-content: center;">
                    <div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
                       <div style="text-align: center;line-height: 34px;"> {
   
   {
   
   item.NO2}}</div>
                       <div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.no2color}"></div>
                       <div style="text-align: center;line-height: 30px;">NO₂</div>
                    </div>
                </el-col>
                <el-col :span="6" style="display: flex; justify-content: center;">
                    <div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
                       <div style="text-align: center;line-height: 34px;"> {
   
   {
   
   item.O3}}</div>
                       <div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.o3color}"></div>
                       <div style="text-align: center;line-height: 30px;">O₃</div>
                    </div>
                </el-col>
                <el-col :span="6" style="display: flex; justify-content: center;">
                    <div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
                       <div style="text-align: center;line-height: 34px;"> {
   
   {
   
   item.CO}}</div>
                       <div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.cocolor}"></div>
                       <div style="text-align: center;line-height: 30px;">CO</div>
                    </div>
                </el-col>
            </el-row>

            <el-row style="color:#FFF; text-align: left;margin-top: 10px;">
                <el-col :span="12"><span style="padding-left: 25px;font-size: 14px;">温馨提示:</span></el-col>
            </el-row>
            <el-row style="color:#FFF; text-align: left;margin-top: 10px;">
                <el-col :span="4">
                    <el-image style="padding:2px;box-sizing: border-box;margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="pb" :fit="'fill'" />
                </el-col>
                <el-col :span="20" style="padding-left: 25px;font-size: 14px; display: flex; flex-direction: column;justify-content: center; ">{
   
   {
   
   item.tishi[0]}}</el-col>

                <el-col :span="4">
                    <el-image style="padding:2px;box-sizing: border-box;margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="jr" :fit="'fill'" />
                </el-col>
                <el-col :span="20" style="padding-left: 25px;font-size: 14px;  display: flex; flex-direction: column;justify-content: center;  ">{
   
   {
   
   item.tishi[1]}}</el-col>

                <el-col :span="4">
                    <el-image style="padding:2px;box-sizing: border-box;margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="mg" :fit="'fill'" />
                </el-col>
                <el-col :span="20" style="padding-left: 25px;font-size: 14px;  display: flex; flex-direction: column;justify-content: center; ">{
   
   {
   
   item.tishi[2]}}</el-col>

                <el-col :span="4">
                    <el-image style="padding:2px;box-sizing: border-box;  margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="ch" :fit="'fill'" />
                </el-col>
                <el-col :span="20" style="padding-left: 25px;font-size: 14px; display: flex; flex-direction: column;justify-content: center; ">{
   
   {
   
   item.tishi[3]}}</el-col>
            </el-row>

        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  <script lang="ts" setup>
    import ch from '@/assets/img/窗户.png'
    import jr from '@/assets/img/家人.png'
    import mg from '@/assets/img/敏感.png'