refactor(相册): 优化相册数据加载逻辑并移除自动加载
- 移除组件挂载时的自动数据加载 - 添加静默刷新功能,避免重复显示loading状态 - 修改刷新方法实现,区分首次加载和刷新操作
Showing
2 changed files
with
20 additions
and
5 deletions
| ... | @@ -134,10 +134,15 @@ const loading = ref(false); | ... | @@ -134,10 +134,15 @@ const loading = ref(false); |
| 134 | 134 | ||
| 135 | /** | 135 | /** |
| 136 | * 获取家庭相册数据 | 136 | * 获取家庭相册数据 |
| 137 | + * @param {boolean} isRefresh - 是否为刷新操作,刷新时不显示loading状态 | ||
| 137 | */ | 138 | */ |
| 138 | -const fetchAlbumData = async () => { | 139 | +const fetchAlbumData = async (isRefresh = false) => { |
| 139 | try { | 140 | try { |
| 141 | + // 只有首次加载时才显示loading状态,刷新时保持原有内容 | ||
| 142 | + if (!isRefresh) { | ||
| 140 | loading.value = true; | 143 | loading.value = true; |
| 144 | + } | ||
| 145 | + | ||
| 141 | const response = await getPhotoListAPI({ | 146 | const response = await getPhotoListAPI({ |
| 142 | page: 0, | 147 | page: 0, |
| 143 | limit: 4 // 首页只显示4张 | 148 | limit: 4 // 首页只显示4张 |
| ... | @@ -151,8 +156,11 @@ const fetchAlbumData = async () => { | ... | @@ -151,8 +156,11 @@ const fetchAlbumData = async () => { |
| 151 | } catch (error) { | 156 | } catch (error) { |
| 152 | console.error('获取相册数据失败:', error); | 157 | console.error('获取相册数据失败:', error); |
| 153 | } finally { | 158 | } finally { |
| 159 | + // 只有首次加载时才需要关闭loading状态 | ||
| 160 | + if (!isRefresh) { | ||
| 154 | loading.value = false; | 161 | loading.value = false; |
| 155 | } | 162 | } |
| 163 | + } | ||
| 156 | }; | 164 | }; |
| 157 | 165 | ||
| 158 | /** | 166 | /** |
| ... | @@ -164,16 +172,23 @@ const openAlbumList = () => { | ... | @@ -164,16 +172,23 @@ const openAlbumList = () => { |
| 164 | 172 | ||
| 165 | // 组件挂载时获取数据 | 173 | // 组件挂载时获取数据 |
| 166 | onMounted(() => { | 174 | onMounted(() => { |
| 167 | - fetchAlbumData(); | 175 | + // fetchAlbumData(); |
| 168 | }); | 176 | }); |
| 169 | 177 | ||
| 170 | useDidShow(() => { | 178 | useDidShow(() => { |
| 171 | - fetchAlbumData(); | 179 | + // fetchAlbumData(); |
| 172 | }); | 180 | }); |
| 173 | 181 | ||
| 182 | +/** | ||
| 183 | + * 刷新相册数据(静默刷新,不显示loading状态) | ||
| 184 | + */ | ||
| 185 | +const refreshData = () => { | ||
| 186 | + fetchAlbumData(true); | ||
| 187 | +}; | ||
| 188 | + | ||
| 174 | // 暴露刷新方法给父组件 | 189 | // 暴露刷新方法给父组件 |
| 175 | defineExpose({ | 190 | defineExpose({ |
| 176 | - refreshData: fetchAlbumData, | 191 | + refreshData, |
| 177 | }); | 192 | }); |
| 178 | </script> | 193 | </script> |
| 179 | 194 | ... | ... |
| ... | @@ -151,7 +151,7 @@ const currentDeleteItem = ref(null); | ... | @@ -151,7 +151,7 @@ const currentDeleteItem = ref(null); |
| 151 | */ | 151 | */ |
| 152 | onMounted(() => { | 152 | onMounted(() => { |
| 153 | Taro.setNavigationBarTitle({ title: '家庭相册' }); | 153 | Taro.setNavigationBarTitle({ title: '家庭相册' }); |
| 154 | - fetchAlbumList(); | 154 | + // fetchAlbumList(); |
| 155 | }); | 155 | }); |
| 156 | 156 | ||
| 157 | useDidShow(() => { | 157 | useDidShow(() => { | ... | ... |
-
Please register or login to post a comment