diff --git a/pages/index/index.js b/pages/index/index.js index c56025d..b53e95c 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -45,6 +45,9 @@ Page({ // 导航栏显示控制 showNavBar: true, // 控制导航栏显示/隐藏 lastScrollTop: 0, // 上一次滚动位置 + + // 回到顶部按钮 + showBackToTop: false, // 控制回到顶部按钮显示/隐藏 }, // 跳转到聊天页面 @@ -630,26 +633,16 @@ Page({ // 获取滚动信息 const { scrollTop, scrollHeight, clientHeight } = e.detail; - // 导航栏显示/隐藏逻辑 - const { lastScrollTop } = this.data; - - // 下滑检测:如果当前滚动位置大于上一次滚动位置,且不在顶部(scrollTop > 10),则隐藏导航栏 - if (scrollTop > lastScrollTop && scrollTop > 10) { + // 显示/隐藏回到顶部按钮:当滚动距离超过500rpx时显示 + if (scrollTop > 500) { this.setData({ - showNavBar: false + showBackToTop: true }); - } - // 上滑检测:如果当前滚动位置小于上一次滚动位置,或者回到顶部,则显示导航栏 - else if (scrollTop < lastScrollTop || scrollTop <= 10) { + } else { this.setData({ - showNavBar: true + showBackToTop: false }); } - - // 更新上一次滚动位置 - this.setData({ - lastScrollTop: scrollTop - }); }, // 上拉加载更多 @@ -658,6 +651,14 @@ Page({ this.loadGoods(true) } }, + + // 回到顶部功能 + backToTop: function() { + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 // 动画持续时间,单位ms + }); + }, // 切换图片 swiperChange(e) { diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 3d44801..5efd103 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,6 +1,6 @@ - - + + 专业的鸡蛋现货交易平台 @@ -243,6 +243,15 @@ + + + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 890399d..328bbcf 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -19,6 +19,19 @@ page { background-color: #f5f7fa; } +/* 导航栏固定样式 */ +.nav-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; + background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%); + padding: 20rpx 20rpx 0 20rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + /* 标题样式 */ .title { font-size: 36rpx; @@ -372,7 +385,7 @@ page { /* 商品区域样式 - 填充完整宽度 */ .goods-section { background-color: transparent; - padding: 0 20rpx; + padding: 320rpx 20rpx 0 20rpx; margin: 0; flex: 1; overflow-y: auto; @@ -589,6 +602,36 @@ page { color: #1677ff; } +/* 回到顶部按钮样式 */ +.back-to-top-btn { + position: fixed; + right: 40rpx; + bottom: 120rpx; + width: 80rpx; + height: 80rpx; + background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.4); + z-index: 998; + transition: all 0.3s ease; + border: 2rpx solid rgba(255, 255, 255, 0.8); +} + +.back-to-top-btn:hover { + transform: scale(1.1); + box-shadow: 0 6rpx 20rpx rgba(22, 119, 255, 0.5); +} + +.back-to-top-icon { + font-size: 36rpx; + color: white; + font-weight: bold; + line-height: 1; +} + /* 图片预览样式 */ .image-preview-mask { position: fixed;