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