refactor(ui): 首页添加回到最顶端按钮
This commit is contained in:
@@ -3,7 +3,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
showTop: false,
|
showTop: false,
|
||||||
scrollTop: 0,
|
scrollTop: 0,
|
||||||
oldLocation: 0
|
oldLocation: 0,
|
||||||
|
minScrollTop: 400, // 内置最小scrollTop值设置, 方便组件自身差异化设置
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -19,7 +20,7 @@ export default {
|
|||||||
},
|
},
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
this.oldLocation = e.scrollTop;
|
this.oldLocation = e.scrollTop;
|
||||||
if (e.scrollTop > 400) {
|
if (e.scrollTop > this.minScrollTop) {
|
||||||
this.showTop = true;
|
this.showTop = true;
|
||||||
} else {
|
} else {
|
||||||
this.showTop = false;
|
this.showTop = false;
|
||||||
|
|||||||
@@ -126,7 +126,7 @@
|
|||||||
<!-- 小程序隐私协议 -->
|
<!-- 小程序隐私协议 -->
|
||||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
<to-top class="mescroll-totop" v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -135,13 +135,22 @@
|
|||||||
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
|
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
|
||||||
import diyJs from '@/common/js/diy.js';
|
import diyJs from '@/common/js/diy.js';
|
||||||
import indexJs from './public/js/index.js';
|
import indexJs from './public/js/index.js';
|
||||||
|
import toTop from '@/components/toTop/toTop.vue';
|
||||||
|
import scroll from '@/common/js/scroll-view.js';
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
minScrollTop: 200,
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
uniPopup,
|
uniPopup,
|
||||||
nsNavbar
|
nsNavbar,
|
||||||
|
toTop
|
||||||
},
|
},
|
||||||
mixins: [diyJs, indexJs]
|
mixins: [diyJs, indexJs, scroll]
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -190,6 +199,9 @@
|
|||||||
font-size: 60rpx;
|
font-size: 60rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mescroll-totop {
|
||||||
|
bottom: 100px !important;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user