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

使用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><Swiperref="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>

链接地址：
https://www.swiper.com.cn/
https://animate.style/
https://www.npmjs.com/package/swiper

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

禁止微信浏览器的下拉滑动
禁止微信浏览器的下拉滑动解决思路: 1 先禁止body的滚动事件 2 再给需要scroll的元素加上自定义的滚动事件注:加入此代码后要给需要scroll的元素加上.scroll的class var ...
java 微信百度地图_[Java教程]H5微信通过百度地图API实现导航方式二
[Java教程]H5微信通过百度地图API实现导航方式二 0 2017-08-01 23:53:20 要有服务器才行哦 body, html {width: 100%;height: 100%;mar ...
微信浏览器禁掉上下滑动（必看）
最近用mui+vue做了一个公众号系统,mui-scroll 的滚动和微信浏览器的上下滑动滑动冲突,会引起页面卡顿,无论怎么调整阻尼系数,问题依然存在,而且,比较坑爹. 网络查了好久,各种阻止依然不 ...
微信浏览器的html5页面显示配置等问题汇集 1,禁止微信浏览器分享页面链接 (定点更新)...
公司新需求,要求从安卓IOS应用分享到微信的链接页面不允许二次转发,所以开始编程第一步,上网找资料... 网上大神就是多,不消两分钟,找到方案,很简单,上代码先: 1 wx.config({ 2 de ...
微信浏览器中页面刷新
判断浏览器类型微信浏览器无法使用window.location.reload()刷新页面本文转自手不要乱摸 51CTO博客,原文链接:http://blog.51cto.com/58808 ...
uni-app h5微信浏览器预览和下载pdf
预览offce文件.可以打开 PDF WORD PPT EXCEL 文件 - DCloud 插件市场一.预览pdf 预览本来使用的是uni-app插件市场的插件,但是这里会使用到插件开发 ...
微信小程序---页面跳转的方式有哪些？
小程序的常用跳转方式有以下五种 ------ (点击蓝色可以直接跳转到小程序官方文档解释): 1. wx.switchTab :用于跳转到tab页面: wx.switchTab({url:'../in ...
微信小程序页面左右滑动事件+回到顶部
微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要 ...
调用微信浏览器关闭页面的功能
pushHistory(); window.addEventListener("popstate", function(e) {alert("我监听到了浏览器的返回按钮事 ...
禁止微信公众号页面上下滑动
data(){return {handler: function(e) {e.preventDefault();}, //阻止body滑动} }, methods: {closeTouch: func ...

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

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

最新文章

热门文章