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

返回顶部逻辑调整

上级 0985e81d
...@@ -164,7 +164,6 @@ ...@@ -164,7 +164,6 @@
</@ibizindent> </@ibizindent>
</#if> </#if>
</div> </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" > <div v-show="bottomLoadding && !allLoaded" class="loadding" >
<span>加载中</span> <span>加载中</span>
<ion-spinner name="dots"></ion-spinner> <ion-spinner name="dots"></ion-spinner>
......
...@@ -796,30 +796,6 @@ ...@@ -796,30 +796,6 @@
this.$store.commit('setPopupStatus',false) 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 @@ ...@@ -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 @@ ...@@ -26,7 +26,6 @@
.app-mob-mdctrl{ .app-mob-mdctrl{
height:100%; height:100%;
.app-mob-mdctrl-${ctrl.name}{ .app-mob-mdctrl-${ctrl.name}{
overflow: auto;
height:100%; height:100%;
position: relative; position: relative;
.loadding { .loadding {
......
...@@ -131,7 +131,23 @@ ${css.getCssStyle()} ...@@ -131,7 +131,23 @@ ${css.getCssStyle()}
} }
</#if> </#if>
//去除滚动条高度 .scroll_tool{
ion-infinite-scroll-content{ .scrollToTop{
min-height: 1px; 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 @@ ...@@ -119,7 +119,7 @@
<div id="searchform<#if view.getName()??>${view.getName()?lower_case}</#if>"></div> <div id="searchform<#if view.getName()??>${view.getName()?lower_case}</#if>"></div>
</#if> </#if>
<#-- 搜索表单:END --> <#-- 搜索表单:END -->
<ion-content> <ion-content <#if isScroll??>:scroll-events="true" @ionScroll="onScroll" ref="ionScroll" @ionScrollEnd="onScrollEnd"</#if>>
<#-- 视图是否支持下拉刷新:BEGIN --> <#-- 视图是否支持下拉刷新:BEGIN -->
<#if view.isEnablePullDownRefresh?? && view.isEnablePullDownRefresh()> <#if view.isEnablePullDownRefresh?? && view.isEnablePullDownRefresh()>
<ion-refresher <ion-refresher
...@@ -143,6 +143,11 @@ ...@@ -143,6 +143,11 @@
${view_content} ${view_content}
</#if> </#if>
</@ibizindent> </@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> </ion-content>
<#-- 输出底部工具栏或者底部内容:BEGIN --> <#-- 输出底部工具栏或者底部内容:BEGIN -->
<#if isOutputToolBar('MOBBOTTOMMENU') || view_footer??> <#if isOutputToolBar('MOBBOTTOMMENU') || view_footer??>
......
<#assign isScroll = true>
<#ibizinclude> <#ibizinclude>
../@MACRO/LAYOUTPANEL_VIEW.template.ftl ../@MACRO/LAYOUTPANEL_VIEW.template.ftl
</#ibizinclude> </#ibizinclude>
......
...@@ -347,6 +347,57 @@ ${P.getLogicCode(logic, "LOGIC.vue").code} ...@@ -347,6 +347,57 @@ ${P.getLogicCode(logic, "LOGIC.vue").code}
this.$viewTool.setViewTitleOfThirdParty(this.$t(this.model.srfCaption) as string); 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 --> <#-- 视图独立定义的内容start -->
<#if self_content??> <#if self_content??>
${self_content} ${self_content}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册