update: in the user profile page, pin tabbar to the top when appropriate

Author: Lsnsh

src/pages/user/components/topic-list/topic-list.wxss

@@ -2,7 +2,7 @@
 
 .topic-item {
  padding: 30rpx;
- margin-bottom: 10rpx;
+ margin-bottom: 12rpx;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8rpx;
 }

src/pages/user/user.js

@@ -2,7 +2,9 @@ Page({
  data: {
  bIsReady: false, // 页面是否准备就绪
  bIsFetchingUserCollectTopicList: false, // 是否正在获取用户收藏话题列表
+ bAllowScrollY: false, // 是否允许scroll-view滚动
  nActiveTabIndex: 0,
+ nTabBarOffsetTop: 0, // tabBar距离顶部的距离
  aTabBar: [
  {
  active: true,
@@ -24,13 +26,45 @@ Page({
  this.fnGetUserCollectTopicList(options.name);
  }
  },
+ onReady() {
+ // 更新tabBar距离顶部的距离
+ this.fnUpdateTabBarOffsetTop();
+ },
+ // 监听页面滚动
+ onPageScroll(e) {
+ // 判断页面是否滚动带tabBar顶部
+ if (e.scrollTop >= this.data.nTabBarOffsetTop) {
+ // 将scroll-view设为可滚动（实现tabBar吸顶效果）
+ this.setData({
+ bAllowScrollY: true
+ });
+ } else {
+ // 否则scroll-view设为不可滚动（释放tabBar吸顶效果）
+ this.data.bAllowScrollY &&
+ this.setData({
+ bAllowScrollY: false
+ });
+ }
+ },
  // 点击切换tab
  fnClickSwitchTab(e) {
  let oDataSet = e.currentTarget.dataset;
  this.setData({
  nActiveTabIndex: oDataSet.index
  });
  },
+ // 更新tabBar距离顶部的距离
+ fnUpdateTabBarOffsetTop() {
+ let oQuery = wx.createSelectorQuery();
+ oQuery
+ .select('.tabbar-wrap')
+ .boundingClientRect(res => {
+ this.setData({
+ nTabBarOffsetTop: res.top
+ });
+ })
+ .exec();
+ },
  // 获取用户收藏话题
  fnGetUserCollectTopicList(sUserName) {
  // 显示标题栏加载效果

src/pages/user/user.wxml

@@ -13,7 +13,7 @@
  <view class="user-activity-wrap">
  <!-- tabbar -->
  <view class="tabbar-wrap ta-c">
- <view 
+ <view
  class="tab {{index === nActiveTabIndex ? 'tab-active color-white' : 'color-grey'}}"
  wx:for="{{aTabBar}}"
  wx:key="{{index}}"
@@ -23,22 +23,24 @@
  <view>{{item.text}}</view>
  </view>
  </view>
- <view class="topic-list-wrap">
- <!-- 最近回复列表 -->
- <block wx:if="{{nActiveTabIndex === 0}}">
- <topic-list list="{{oUserProfile.recent_replies}}" name="{{oUserProfile.loginname}}"></topic-list>
- </block>
- <!-- 最新发布话题列表 -->
- <block wx:elif="{{nActiveTabIndex === 1}}">
- <topic-list list="{{oUserProfile.recent_topics}}" name="{{oUserProfile.loginname}}"></topic-list>
- </block>
- <!-- 话题收藏列表 -->
- <block wx:elif="{{nActiveTabIndex === 2}}">
- <topic-list wx:if="{{!bIsFetchingUserCollectTopicList}}" list="{{aUserCollectTopicList}}" name="{{oUserProfile.loginname}}"></topic-list>
- <view wx:else class="topic-collection-list ta-c">
- <view>正在加载...</view>
- </view>
- </block>
- </view>
+ <scroll-view class="topic-list-scroll-wrap" scroll-y="{{bAllowScrollY}}">
+ <view class="topic-list-wrap">
+ <!-- 最近回复列表 -->
+ <block wx:if="{{nActiveTabIndex === 0}}">
+ <topic-list list="{{oUserProfile.recent_replies}}" name="{{oUserProfile.loginname}}"></topic-list>
+ </block>
+ <!-- 最新发布话题列表 -->
+ <block wx:elif="{{nActiveTabIndex === 1}}">
+ <topic-list list="{{oUserProfile.recent_topics}}" name="{{oUserProfile.loginname}}"></topic-list>
+ </block>
+ <!-- 话题收藏列表 -->
+ <block wx:elif="{{nActiveTabIndex === 2}}">
+ <topic-list wx:if="{{!bIsFetchingUserCollectTopicList}}" list="{{aUserCollectTopicList}}" name="{{oUserProfile.loginname}}"></topic-list>
+ <view wx:else class="topic-collection-list ta-c">
+ <view>正在加载...</view>
+ </view>
+ </block>
+ </view>
+ </scroll-view>
  </view>
 </view>

src/pages/user/user.wxss

@@ -1,6 +1,8 @@
 .user-profile-wrap {
+ height: 460rpx;
  padding: 40rpx 30rpx 20rpx 30rpx;
  background: #333;
+ box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .user-avatrl {
@@ -9,31 +11,38 @@
  height: 200rpx;
 }
 .user-name {
+ height: 52rpx;
+ line-height: 52rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
 }
 .user-github-link {
- margin-bottom: 60rpx;
+ margin-bottom: 54rpx;
  font-size: 28rpx;
  color: #A2A099;
  text-decoration: underline;
 }
 /* 用户动态 */
 .tabbar-wrap {
  display: flex;
- background: #2e3331;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
 }
 .tabbar-wrap .tab {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
+ font-weight: 500;
  border-bottom: 6rpx solid #2e3331;
  box-sizing: border-box;
+ background: #2e3331;
 }
 .tabbar-wrap .tab.tab-active {
  border-color: #80bd01;
 }
+.topic-list-scroll-wrap {
+ height: calc(100vh - 100rpx)
+}
 .topic-list-wrap {
  padding: 30rpx 20rpx;
 }