vue3 轮播

1.#轮播源码 #

<script setup>
import {ref} from "vue";
let flag = ref(0);
let posi = ref("0vw");
import {inject} from 'vue'
var startx, starty;

//获得角度
function getAngle(angx, angy) {
  return Math.atan2(angy, angx) * 180 / Math.PI;
};

//根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件
function getDirection(startx, starty, endx, endy) {
  var angx = endx - startx;
  var angy = endy - starty;
  var result = 0;

  //如果滑动距离太短
  if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
    return result;
  }
  var angle = getAngle(angx, angy);
  if (angle >= -135 && angle <= -45) {
    result = 1;
  } else if (angle > 45 && angle < 135) {
    result = 2;
  } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
    result = 3;
  } else if (angle >= -45 && angle <= 45) {
    result = 4;
  }
  return result;
}


let  go1 =(e)=>{//手指触摸完毕屏幕
  var endx, endy;
  endx = e.changedTouches[0].pageX;
  endy = e.changedTouches[0].pageY;
  var direction = getDirection(startx, starty, endx, endy);
  switch (direction) {
    case 0:
     // alert("点击！");
      break;
    case 1:
     // alert("向上！");
      break;
    case 2:
     // alert("向下！");
      break;
    case 3:
    //  alert("向左！");

        dingshiqi();

      if (flag.value == (arr.length - 1)) {
        flag.value = 0;
        posi.value = "0vw"
        return
      }
      flag.value++;
      posi.value = (flag.value * 100) + "vw";
      break;

    case 4:

        dingshiqi();

      if (flag.value == 0) {
        flag.value = arr.length - 1;
        posi.value = (flag.value * 100) +"vw"
        return
      }
      flag.value--;
      posi.value = (flag.value * 100) + "vw";

   //   alert("向右！");

      break;

    default:

      alert("点击！");

      break;

  }

}



const arr = inject('arr')
const content = inject('ck')
console.log(arr)
let fenye = (index) => {
  return "[" + (index + 1) + "/" + arr.length + "]"
}
let  sival = ref(undefined);
let dingshiqi = ()=>{

  sival = setInterval(function () {
    console.log(flag.value)
    if (flag.value == (arr.length - 1)) {
      flag.value = 0;
      posi.value = "0vw"
      return
    }
    flag.value++;
    posi.value = (flag.value * 100) + "vw";


  }, 5000, 5000)

}
if(sival.value==undefined) {
  dingshiqi();
}
let  fe1 =(e)=>{//手指开始触摸屏幕时候

  startx = e.touches[0].pageX;
  starty = e.touches[0].pageY;
}
let move=()=>{

    clearInterval(sival);


}
</script>
<template>

  <div class="m" >
    <div class="ar" v-for="(item,index) in arr" :key="index" @click="content(item.text)">

      <div class="hello" @touchstart="fe1($event)" @touchend="go1($event)" @touchmove="move()">
        <img class="img" :src="item.url"/>
        <div class="tv">
          <div class="waib">
            <div class="in">{{ item.text }}</div>
            <div class="indez">{{ fenye(index) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.ar {
  width: 100vw;
  position: relative;
  right: v-bind(posi);
}

.m {
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
}

.hello {
  width: 100vw;
  height: 200px;
  position: relative;
}

.waib {

  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.img {
  position: relative;
  z-index: 3;
  width: 100vw;
  height: 200px;
}

.tv {
  height: 30px;
  background: rgba(6, 6, 6, 0.5); /*字体不覆盖图片*/
  z-index: 4;
  position: absolute;
  bottom: 0px;

}

.indez {
  line-height: 30px;
  font-size: 13px;
  color: #ffffff;
}

.in {
  line-height: 30px;
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 13px;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap; /*文字超出屏幕不换行*/
  overflow: hidden; /*超出屏幕不显示*/
  text-overflow: ellipsis; /*超出省略号显示*/
}

.m::-webkit-scrollbar {/*去掉滑动sarollbar*/
  display: none;
}
</style>

2.#调用 #

<script setup>
import  lunbo from  "./lunbo.vue"
import {reactive} from "vue";
import { provide } from 'vue'
let content = (c)=>{
alert(c)
}
const  getimg=(name)=>{//此方法必须有，传递图片地址
  return new URL(`/src/assets/${name}`, import.meta.url).href
}
let arr = reactive([{
  url:getimg("ce.jpg"),
  text:"测试一"
},{
  url:getimg("lb.jpg"),
  text:"测试二"
},{
  url:getimg("lb1.jpg"),
  text:"测试三"
},{
  url:getimg("lb.jpg"),
  text:"测试四"
},{
  url:getimg("lb1.jpg"),
  text:"测试五"
}])
provide("arr",arr);//传递list
provide("ck",content)//传递回调
</script>

<template>
<lunbo></lunbo>


</template>