提交 cd1e766f 编写于 作者: KK's avatar KK

返回顶部逻辑调整

上级 0985e81d
......@@ -164,7 +164,6 @@
</@ibizindent>
</#if>
</div>
<div class="scrollToTop" @click="scrollToTop" ref="scroll" v-show="isEnableScrollTop && showScrollButton"> <van-icon name="back-top" /></div>
<div v-show="bottomLoadding && !allLoaded" class="loadding" >
<span>加载中</span>
<ion-spinner name="dots"></ion-spinner>
......
......@@ -796,30 +796,6 @@
this.$store.commit('setPopupStatus',false)
}
/**
* vue 生命周期
*
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public mounted(){
let list:any = this.$refs.mdctrl;
let scroll:any = this.$refs.scroll;
if(list){
list.addEventListener('touchend',()=>{
this.$store.commit('setPopupStatus',true)
}, false)
list.addEventListener('scroll', (e:any) => {
this.scroll(e);
if (scroll && list) {
if (list.scrollTop >= 500) {
this.showScrollButton = true;
}
scroll.style.opacity = (list.scrollTop-200) * 0.001;
}
}, false)
}
}
/**
* 滚动条事件(计算是否到底部)
*
......@@ -1060,43 +1036,6 @@
}
/**
* 是否开启置顶功能
*
* @type {GlobalUiService}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public isEnableScrollTop:boolean = true;
/**
* 显示置顶按钮
*
* @type {GlobalUiService}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public showScrollButton:boolean = false;
/**
* 滑回顶部
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public scrollToTop(){
let mdctrl:any = this.$refs.mdctrl;
if (mdctrl) {
requestAnimationFrame(function () {
let top:number = mdctrl.scrollTop;
let speed:number = top / 6;
if (top!= 0) {
mdctrl.scrollTop -= speed;
}
});
if (mdctrl.scrollTop != 0) {
requestAnimationFrame(this.scrollToTop);
}
}
}
/**
* 长按定时器
*
......
......@@ -26,7 +26,6 @@
.app-mob-mdctrl{
height:100%;
.app-mob-mdctrl-${ctrl.name}{
overflow: auto;
height:100%;
position: relative;
.loadding {
......
......@@ -131,7 +131,23 @@ ${css.getCssStyle()}
}
</#if>
//去除滚动条高度
ion-infinite-scroll-content{
min-height: 1px;
.scroll_tool{
.scrollToTop{
opacity: 1;
position: fixed;
right: 20px;
bottom: 120px;
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 40px;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
transition: all .5s;
.van-icon{
font-size: 20px;
color: #333;
}
}
}
......@@ -119,7 +119,7 @@
<div id="searchform<#if view.getName()??>${view.getName()?lower_case}</#if>"></div>
</#if>
<#-- 搜索表单:END -->
<ion-content>
<ion-content <#if isScroll??>:scroll-events="true" @ionScroll="onScroll" ref="ionScroll" @ionScrollEnd="onScrollEnd"</#if>>
<#-- 视图是否支持下拉刷新:BEGIN -->
<#if view.isEnablePullDownRefresh?? && view.isEnablePullDownRefresh()>
<ion-refresher
......@@ -143,6 +143,11 @@
${view_content}
</#if>
</@ibizindent>
<#if isScroll??>
<div class="scroll_tool">
<div class="scrollToTop" @click="onScrollToTop" v-show="isShouleBackTop" :style="{right:isScrollStop?'20px':'-25px'}" > <van-icon name="back-top" /></div>
</div>
</#if>
</ion-content>
<#-- 输出底部工具栏或者底部内容:BEGIN -->
<#if isOutputToolBar('MOBBOTTOMMENU') || view_footer??>
......
<#assign isScroll = true>
<#ibizinclude>
../@MACRO/LAYOUTPANEL_VIEW.template.ftl
</#ibizinclude>
......
......@@ -347,6 +347,57 @@ ${P.getLogicCode(logic, "LOGIC.vue").code}
this.$viewTool.setViewTitleOfThirdParty(this.$t(this.model.srfCaption) as string);
}
<#if isScroll??>
/**
* onScroll滚动事件
*
* @memberof ${srfclassname('${view.name}')}Base
*/
public onScroll(e:any){
this.isScrollStop = false;
if (e.detail.scrollTop>600) {
this.isShouleBackTop = true;
}else{
this.isShouleBackTop = false;
}
}
/**
* onScroll滚动结束事件
*
* @memberof ${srfclassname('${view.name}')}Base
*/
public onScrollEnd(){
this.isScrollStop = true;
}
/**
* 返回顶部
*
* @memberof ${srfclassname('${view.name}')}Base
*/
public onScrollToTop() {
let ionScroll:any = this.$refs.ionScroll;
if(ionScroll && ionScroll.scrollToTop && this.$util.isFunction(ionScroll.scrollToTop)){
ionScroll.scrollToTop(500);
}
}
/**
* 是否应该显示返回顶部按钮
*
* @memberof ${srfclassname('${view.name}')}Base
*/
public isShouleBackTop = false;
/**
* 当前滚动条是否是停止状态
*
* @memberof ${srfclassname('${view.name}')}Base
*/
public isScrollStop = true;
</#if>
<#-- 视图独立定义的内容start -->
<#if self_content??>
${self_content}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册