模板中心页面数据过多,回到顶部效果

This commit is contained in:
red-deng-deng 2022-01-21 15:07:31 +08:00
parent 56831173ac
commit 6b22732286
3 changed files with 27 additions and 9 deletions

View File

@ -152,7 +152,7 @@ getLandingdata(val){
if(!this.state.model.top_image) if(!this.state.model.top_image)
{ {
Notify.clear(); Notify.clear();
Notify.error("请上落地页顶部banner") Notify.error("请上落地页顶部banner")
this.setState({activeNavStatus:1}); this.setState({activeNavStatus:1});
return; return;
} }

View File

@ -19,7 +19,9 @@ import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom}
// </div> // </div>
// </div> // </div>
// </div> // </div>
window.addEventListener('scroll',function(){
console.log('滚动');
});
export default class mytemplate extends React.Component{ export default class mytemplate extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
@ -46,7 +48,6 @@ export default class mytemplate extends React.Component{
} }
componentDidMount(e){ componentDidMount(e){
//监听滚动条滚动事件 //监听滚动条滚动事件
let component=document.querySelector('.mytemplate');
let self=this; let self=this;
@ -206,6 +207,12 @@ export default class mytemplate extends React.Component{
sessionStorage.setItem('pageChange',0); sessionStorage.setItem('pageChange',0);
} }
}
toTop(){
this.refs.component.scrollTo({
top:0,
behavior:'smooth',
});
} }
onBack(){ onBack(){
this.refs.preview.popPage() this.refs.preview.popPage()
@ -217,8 +224,8 @@ export default class mytemplate extends React.Component{
render(){ render(){
return( return(
<div className="mytemplate"> <div className="mytemplate" >
<div className="scroller-page" > <div className="scroller-page" ref="component" >
<div className="scroller-page-banner basic"> <div className="scroller-page-banner basic">
<div className="scroller-page-banner-content"> <div className="scroller-page-banner-content">
@ -230,7 +237,7 @@ export default class mytemplate extends React.Component{
</div> </div>
<div className="scroller-page-banner-mask"></div> <div className="scroller-page-banner-mask"></div>
</div> </div>
<div className="scroller-page-body"> <div className="scroller-page-body" >
<div className="scroller-page-body-content"> <div className="scroller-page-body-content">
<div className="scroller-page-body-content-inner"> <div className="scroller-page-body-content-inner">
<div className="xj-simple-tabs scroller-page-tabs"> <div className="xj-simple-tabs scroller-page-tabs">
@ -339,6 +346,7 @@ export default class mytemplate extends React.Component{
</div> </div>
<img className="toTopBtn" onClick={this.toTop.bind(this)} src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/totopBtn.png" alt=""/>
<div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div> <div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div>
</div> </div>
</div> </div>

View File

@ -2253,7 +2253,7 @@ div.previewclose {
} }
.scroller-page { .scroller-page {
height: 100%; height: 95vh;
overflow: auto; overflow: auto;
position: relative; position: relative;
top: -2px top: -2px
@ -2430,7 +2430,7 @@ div.previewclose {
.scroller-page-body { .scroller-page-body {
height: 100%; height: 100%;
overflow: scroll; // overflow: scroll;
padding-top: 150px; padding-top: 150px;
position: relative position: relative
} }
@ -2548,3 +2548,13 @@ div.previewclose {
background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff)); background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
z-index: 1; z-index: 1;
} }
.toTopBtn{
position: fixed;
bottom: 0;
width: 90px;
right: 2vh;
cursor: pointer;
}
.toTopBtn:hover{
transform: scale(1.2);
}