mv-full-page

兼容PC、移动端(微信公众号) 全屏滚动组件

喜欢的帮忙给个 star, 只要有时间就更新和优化

其他版本

Vue2版本请移步2.0分支

演示

Demo

安装

npm i mv-full-page@next

或

yarn add mv-full-page@next

全局注册

import { createApp } from 'vue';
import MvFullPage from 'mv-full-page'
import 'mv-full-page/dist-lib/style.css'const app = createApp();app.use(MvFullPage);

局部注册

import { defineComponent } from "vue";
import MvFullPage from 'mv-full-page'
import 'mv-full-page/dist-lib/style.css'export default defineComponent({components:{MvFullPage}
});

示例代码

基本使用

跳转

动态插槽

   <mv-full-page   :pages="list.length":v-model:page="page" ><!-- 动态插槽 --><templatev-slot:[dynamicSlotName+(index+1)]v-for="(item, index) in list"><div :class="`page${index + 1}`" :key="index">{{ `页面${JSON.stringify(item)}` }}</div></template></mv-full-page>

功能点

移动端触摸滑动
pc端鼠标滚轮切换
支持页面缓存
解决 ios 滑动页面回弹
支持滚动方向切换
支持局部滚动（处理了微信公众号局部元素滚动回弹的问题）
支持自定义滚动容器定位方式和容器大小
指示器切换页面
支持自定义过渡动画速度
支持响应式窗口大小改变
支持动态插槽
支持 typescript

Props

name	类型	默认值	备注
pages	Number	1	页面总数
page: `v-model:page`	Number	1	当前页面
config	Object	-	详情见配置

配置

{/*** 定位模式*/position: "fixed",/*** 自定义容器宽度*/width: "100%",/*** 自定义容器高度*/height: "100%",/***  v => 垂直方向 ， h => 水平方向*/direction: "h",/*** 指示器*/poi: {/*** 显示指示器*/pointer: true,/*** 指示器位置*/position: "right",/*** 指示器类名*/className: ""},/*** 缓存页面*/cache: true,/*** 页面背景数组* 示例格式: [{ color:'pink' },{ image:'https://xxx.png' }]*/bgArr: [],/*** 自定义过渡动画*/transition: {duration: "1000ms", // 动画时长timingFun: "ease", // 动画速度曲线delay: "0s", // 动画延迟},// 自动播放autoPlay: false,//  循环播放loop: false,// 切换间隔interval: 1000,arrow: {// 上一页箭头last: false,// 下一页箭头next: false,},
}

Events

name	说明	回调参数
rollEnd	滚动页面后触发	`(page:滚动后的页码)`
pointerMouseover	指示器mouseover事件和指示器索引	`({event:事件,index:指示器对应索引})`

局部滚动 div

name	类型	默认值	备注
data-scroll	Boolean	false	局部滚动一定要在滚动容器添加这个属性 `<div data-scroll="true"></div>`

Browsers support

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

兼容PC、移动端(微信公众号) vue全屏滚动组件支持vue2和vue3相关推荐

Java在Web端微信公众号授权登录
Java在Web端微信公众号授权登录 1.需要在微信开发平台配置 url:是自己服务中的微信需要推给你的地址(需要使用二级域名,可以去添加链接描述)购买9块钱1个月使用权或者白嫖都可 token 这个 ...
移动端微信公众号页面开发中使用了footer标签导致页面错位
移动端微信公众号页面开发中使用了< footer>标签导致页面错位之前也用过这个标签没出现过此类问题在微信开发者工具中发现把footer 改成div 样式就正常了
一种基于PC端微信公众号的高效采集监测方法
相关阅读: 一套价值十万的微信公众号采集解决方案史上最快.最笨的公众号文章阅读数.在看数采集,哈哈 Python爬虫实践:如何快速.高效的爬取微信公众号阅读在看数微信采集之公众号账号信息最近公司 ...
微信公众号+Vue+JS-SDK配置注册失败，显示config:fail,Error: 系统错误，错误码：63002,invalid signature等解决方法
用vue做微信公众号调用js-sdk遇到的问题问题1(JS-SDK在IOS中报签名无效invalid signature) 解决办法在VUE路由进去你要操作的页面时进行config接口注入首先打 ...
移动端---微信公众号开发
微信公众号开发----官网链接公众账号开发 https://mp.weixin.qq.com/ 服务号服务号提供的可开发的功能更多,每个月只能推送4条消息,服务号只能是企业或者组织进行申请订阅号 ...
云主机配置微信公众号后台全记录 --【阿里云ECS CentOS7 + Python3 + Flask + Nginx + Gunicorn + WeRoBot + Systemd 】
前言在天秤座的纠结性格反复权衡后,最终我还是拥有了自己的第一个个人云主机.我这里选择的是"阿里云学生专享服务器",在做学生的最后一年有幸享受到9.5/月的优惠价格,还是要感谢阿里 ...
uniapp开发公众号视频全屏播放退出以后层级过高
uniapp开发微信公众号视频播放 **问题描述:** 在使用uniapp自带的原生视频标签,遇到点击视频播放以后.在点另外的一个弹出层,发现弹出层被video标签覆盖. ![有时候官网给的tips没 ...
移动端微信公众号开发中问题记录及解决方案
1. 关于字体大小.图片大小.块元素大小的确定,目前一种方法,使用rem,rem的计算方式 document.documentElement.style.fontSize = document.doc ...
微信公众号vue接入高德地图定位逆解析
引入模块 npm i @amap/amap-jsapi-loader --save-dev 引入组件 import AMapLoader from '@amap/amap-jsapi-loader' ...
java端微信公众号发送模板信息乱码解决
jdk1.8 windows环境,tomcat下,发送模板信息乱码项目采用httpclient发送请求解决方案 StringEntity s = new StringEntity(jsonStr, ...

兼容PC、移动端(微信公众号) vue全屏滚动组件支持vue2和vue3

mv-full-page

其他版本

演示

安装

全局注册

局部注册

示例代码

基本使用

动态插槽

功能点

Props

配置

Events

局部滚动 div

Browsers support

兼容PC、移动端(微信公众号) vue全屏滚动组件支持vue2和vue3相关推荐

最新文章

热门文章

兼容PC、移动端(微信公众号) vue全屏滚动组件 支持vue2和vue3

mv-full-page

其他版本

演示

安装

全局注册

局部注册

示例代码

基本使用

动态插槽

功能点

Props

配置

Events

局部滚动 div

Browsers support

兼容PC、移动端(微信公众号) vue全屏滚动组件 支持vue2和vue3相关推荐

最新文章

热门文章

兼容PC、移动端(微信公众号) vue全屏滚动组件支持vue2和vue3

兼容PC、移动端(微信公众号) vue全屏滚动组件支持vue2和vue3相关推荐