vue 滚动显示,vue div滚动
这篇文章主要介绍了呜呜呜-全页实现整屏滚动页面,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
目录
一、man.js引入二、使用三、常用应用程序接口直播平台源码,呜呜呜-全页实现整屏滚动页面
一、man.js引入
//突出显示的块
从导入路由器。/路由器
Vue.config.productionTip=false
//整屏滚动
进口fullpage.js/vendors/scrolloverflow;
从" vue-fullpage.js "导入VueFullPage
Vue.use(VueFullPage)
/* eslint-禁用无-新*/
新Vue({
埃尔: #app ,
路由器,
组件:{ App },
模板:"应用程序/"
})
二、使用
1.html,
模板
差异
整页:options= options id=整页 ref=整页
差异
h3vue-fullpage.js/h3
/div
差异
差异
h3幻灯片2.1/h3
/div
差异
h3幻灯片2.2/h3
/div
差异
h3Slide 2.3/h3
/div
/div
差异
h3第3部分/h3
/div
/整页
/div
/模板
2.js
导出默认值{
data() {
返回{
选项:{
锚点:[第一页,第二页,第三页,第四页,第五页,第六页],
许可证密钥:"开源-GPL v3-许可证",
afterLoad: this.afterLoad,//方法中的方法即回调函数
scrollOverflow:没错,
滚动条:假,
菜单:" #菜单",
sectionsColor: [
#23A84A ,
#ff5f45 ,
#0798ec ,
#fec401 ,
#000000,
#E7EFFE ,
],
},
};
},
}
三、常用API
1 .后负荷:对应的函数写在方法中,常用作对页面的处理
方法:{
后加载:功能(起点、终点、方向){
//原点起点目的地终点方向方向固定写法
这个。naviindex=目的地。指数;
//destination.index代表对应页面索引(从0开始)
//拿到对应页面的指数就可以进行操作
if (destination.index 0) {
this.phoneShow=true
}
if (destination.index===0) {
this.phoneShow=false
}
},
}
2 .移动到通过事件跳转到对应的页,面,张,版页面
选项:{
afterLoad: this.afterLoad,
//一定要在选择中插入这段数组,数组的值对应页,面,张,版页面
锚点:[第一页,第二页,第三页,第四页,第五页,第六页],
许可证密钥:"开源-GPL v3-许可证",
afterLoad: this.afterLoad,//方法中的方法即回调函数
scrollOverflow:没错,
滚动条:假,
菜单:" #菜单",
sectionsColor: [
#23A84A ,
#ff5f45 ,
#0798ec ,
#fec401 ,
#000000,
#E7EFFE ,
],
},
移动到(页数){
//固定写法,第一个参数代表选择中锚数组中的值
//在点击时传递对应的页值即可
fullpage_api.moveTo(pages,1);
},
到此这篇关于呜呜呜-全页实现整屏滚动页面的文章就介绍到这了,更多相关某视频剪辑软件整屏滚动页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。