Browse Source

修改导航栏为固定顶部,优化回到顶部按钮逻辑

pull/1/head
Default User 2 months ago
parent
commit
526fc134fc
  1. 31
      pages/index/index.js
  2. 13
      pages/index/index.wxml
  3. 45
      pages/index/index.wxss

31
pages/index/index.js

@ -45,6 +45,9 @@ Page({
// 导航栏显示控制 // 导航栏显示控制
showNavBar: true, // 控制导航栏显示/隐藏 showNavBar: true, // 控制导航栏显示/隐藏
lastScrollTop: 0, // 上一次滚动位置 lastScrollTop: 0, // 上一次滚动位置
// 回到顶部按钮
showBackToTop: false, // 控制回到顶部按钮显示/隐藏
}, },
// 跳转到聊天页面 // 跳转到聊天页面
@ -630,26 +633,16 @@ Page({
// 获取滚动信息 // 获取滚动信息
const { scrollTop, scrollHeight, clientHeight } = e.detail; const { scrollTop, scrollHeight, clientHeight } = e.detail;
// 导航栏显示/隐藏逻辑 // 显示/隐藏回到顶部按钮:当滚动距离超过500rpx时显示
const { lastScrollTop } = this.data; if (scrollTop > 500) {
// 下滑检测:如果当前滚动位置大于上一次滚动位置,且不在顶部(scrollTop > 10),则隐藏导航栏
if (scrollTop > lastScrollTop && scrollTop > 10) {
this.setData({ this.setData({
showNavBar: false showBackToTop: true
}); });
} } else {
// 上滑检测:如果当前滚动位置小于上一次滚动位置,或者回到顶部,则显示导航栏
else if (scrollTop < lastScrollTop || scrollTop <= 10) {
this.setData({ this.setData({
showNavBar: true showBackToTop: false
}); });
} }
// 更新上一次滚动位置
this.setData({
lastScrollTop: scrollTop
});
}, },
// 上拉加载更多 // 上拉加载更多
@ -658,6 +651,14 @@ Page({
this.loadGoods(true) this.loadGoods(true)
} }
}, },
// 回到顶部功能
backToTop: function() {
wx.pageScrollTo({
scrollTop: 0,
duration: 300 // 动画持续时间,单位ms
});
},
// 切换图片 // 切换图片
swiperChange(e) { swiperChange(e) {

13
pages/index/index.wxml

@ -1,6 +1,6 @@
<view class="container"> <view class="container">
<!-- 导航栏区域,根据showNavBar状态控制显示/隐藏 --> <!-- 导航栏区域,固定在顶部 -->
<view wx:if="{{showNavBar}}" class="nav-bar"> <view class="nav-bar">
<!-- 标题 --> <!-- 标题 -->
<view class="title">专业的鸡蛋现货交易平台</view> <view class="title">专业的鸡蛋现货交易平台</view>
@ -243,6 +243,15 @@
</view> </view>
</view> </view>
<!-- 回到顶部按钮 -->
<view
wx:if="{{showBackToTop}}"
class="back-to-top-btn"
bindtap="backToTop"
>
<text class="back-to-top-icon">↑</text>
</view>
<!-- 未授权登录提示弹窗 --> <!-- 未授权登录提示弹窗 -->
<view wx:if="{{showAuthModal}}" class="auth-modal-overlay"> <view wx:if="{{showAuthModal}}" class="auth-modal-overlay">
<view class="auth-modal-container"> <view class="auth-modal-container">

45
pages/index/index.wxss

@ -19,6 +19,19 @@ page {
background-color: #f5f7fa; 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 { .title {
font-size: 36rpx; font-size: 36rpx;
@ -372,7 +385,7 @@ page {
/* 商品区域样式 - 填充完整宽度 */ /* 商品区域样式 - 填充完整宽度 */
.goods-section { .goods-section {
background-color: transparent; background-color: transparent;
padding: 0 20rpx; padding: 320rpx 20rpx 0 20rpx;
margin: 0; margin: 0;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@ -589,6 +602,36 @@ page {
color: #1677ff; 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 { .image-preview-mask {
position: fixed; position: fixed;

Loading…
Cancel
Save