vue3 H5 微信浏览器邀请函页面上下滑动实现方式

最新推荐文章于 2024-02-03 11:15:00 发布

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

最新推荐文章于 2024-02-03 11:15:00 发布

阅读量540

点赞数 1

分类专栏： # 微信文章标签：微信 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47300795/article/details/131322435

版权

微信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用swiper

npm i swiper

页面引用

import 'swiper/css';
// import 'swiper/css/navigation';
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Autoplay } from 'swiper/core';

如果只是需要比较简单的样式，在swiper官网上就能找到，把他们的代码下载下来，复制一下就行，如果是自定义的翻页方式，就需要自己去写，我这边是使用的那种普通的邀请函上下滑动的方式，配置如下：

//引入
import { EffectCreative } from 'swiper';```
//使用
const modules = ref([EffectCreative]);
//swiper标签使用
:modules="modules"

完整代码如下

<template>
  <Swiper
    ref="swiperRef"
    @swiper="swiperHandler"
    :modules="modules"
    class="pages"
    direction="vertical"
    :loop="true"
    :touchRatio="2"
    :shortSwipes="true"
    :longSwipesMs="50000"
    effect="creative"
    :creativeEffect="creativeEffectData"
    @slideChange="slideNextHander"
  >
    <!-- style="background-color: aquamarine" -->
    <SwiperSlide
      ><div id="aa" class="page" style="background-color: #fff">
        <Music></Music></div
    ></SwiperSlide>
    <SwiperSlide><div id="bb" class="page" style="background-color: bisque">2</div></SwiperSlide>
    <SwiperSlide><div id="cc" class="page" style="background-color: aqua">3</div></SwiperSlide>
    <SwiperSlide><div class="page" style="background-color: cadetblue">4</div></SwiperSlide>
    <SwiperSlide><div class="page" style="background-color: darkgoldenrod">5</div></SwiperSlide>
  </Swiper>
</template>
<script setup>
import 'swiper/css';
// import 'swiper/css/navigation';
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Autoplay } from 'swiper/core';
import { EffectCreative } from 'swiper';
// import Music from './components/music';

SwiperCore.use([Autoplay]);
console.log('Swiper====', Swiper);
console.log('Autoplay===', SwiperCore);
const modules = ref([EffectCreative]);
const swiperRef = ref();
const creativeEffectData = ref({
  prev: {
    scale: 1,
    translate: [0, '0%', -1, '100%'], //上下滑动
  },
  next: {
    scale: 1,
    translate: [0, '100%', 1, '-100%'], //上下滑动
  },
});
const swiperHandler = (e) => {
  console.log('eee======', e);
};
const slideNextHander = (e) => {
  console.log('111222222', e);
};
onMounted(() => {
  // swiperHandler();
  console.log('swiperRef====', swiperRef.value);
});
</script>
<style lang="less" scoped>
.pages {
  height: 100vh;
}
.page {
  width: 100vw;
  height: 100vh;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
</style>