feat(PointsDetail): 添加返回顶部组件并优化标签栏样式
为提升用户体验,在积分详情页添加返回顶部组件,同时优化标签栏背景色为白色以提高可读性。注释掉未使用的nut-sticky组件。
Showing
1 changed file
with
6 additions
and
1 deletions
| ... | @@ -56,7 +56,8 @@ | ... | @@ -56,7 +56,8 @@ |
| 56 | </view> | 56 | </view> |
| 57 | </view> | 57 | </view> |
| 58 | <!-- Tabs --> | 58 | <!-- Tabs --> |
| 59 | - <view class="border-b border-gray-200"> | 59 | + <!-- <nut-sticky top="0"> --> |
| 60 | + <view class="border-b border-gray-200 bg-white"> | ||
| 60 | <view class="flex space-x-8"> | 61 | <view class="flex space-x-8"> |
| 61 | <view :class="['py-3 font-medium', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'"> | 62 | <view :class="['py-3 font-medium', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'"> |
| 62 | 全部 | 63 | 全部 |
| ... | @@ -69,6 +70,7 @@ | ... | @@ -69,6 +70,7 @@ |
| 69 | </view> | 70 | </view> |
| 70 | </view> | 71 | </view> |
| 71 | </view> | 72 | </view> |
| 73 | + <!-- </nut-sticky> --> | ||
| 72 | <!-- Points history list --> | 74 | <!-- Points history list --> |
| 73 | <view class="pt-4"> | 75 | <view class="pt-4"> |
| 74 | <view v-if="loading"> | 76 | <view v-if="loading"> |
| ... | @@ -97,6 +99,8 @@ | ... | @@ -97,6 +99,8 @@ |
| 97 | </view> | 99 | </view> |
| 98 | </view> | 100 | </view> |
| 99 | <!-- <BottomNav /> --> | 101 | <!-- <BottomNav /> --> |
| 102 | + <!-- 返回顶部组件 --> | ||
| 103 | + <BackToTop :distance="200" /> | ||
| 100 | </view> | 104 | </view> |
| 101 | </template> | 105 | </template> |
| 102 | 106 | ||
| ... | @@ -105,6 +109,7 @@ import { ref, computed, onMounted, watch } from 'vue'; | ... | @@ -105,6 +109,7 @@ import { ref, computed, onMounted, watch } from 'vue'; |
| 105 | import Taro, { useDidShow } from '@tarojs/taro'; | 109 | import Taro, { useDidShow } from '@tarojs/taro'; |
| 106 | import AppHeader from '../../components/AppHeader.vue'; | 110 | import AppHeader from '../../components/AppHeader.vue'; |
| 107 | import BottomNav from '../../components/BottomNav.vue'; | 111 | import BottomNav from '../../components/BottomNav.vue'; |
| 112 | +import BackToTop from '../../components/BackToTop.vue'; | ||
| 108 | import { Right, My } from '@nutui/icons-vue-taro'; | 113 | import { Right, My } from '@nutui/icons-vue-taro'; |
| 109 | import { getPointListAPI } from '../../api/points'; | 114 | import { getPointListAPI } from '../../api/points'; |
| 110 | 115 | ... | ... |
-
Please register or login to post a comment