⚡️ Taro 小程序的用户体验优化 × 7

使用 Taro 开发 FUTAKE 小程序时，7 个与用户体验有关的优化。

👉 点击体验 FUTAKE 🌁

1. Dark Mode

参考 官方 Dark Mode 适配指南 添加 theme.json，并在 app.config.js 中添加相关配置。

小程序自身 UI 的 Dark Mode，可使用 CSS 变量来控制，其它需要变化的色值，均源自 CSS 变量即可。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/dark-mode

2. 可拖动的 Modal

FUTAKE 实现了类似手机原生弹窗的效果 —— 按住弹窗体后，可上下拖动弹窗。

实现方式即监听 touch 相关事件，动态设置 CSS 偏移，为进一步提升性能，使用原生小程序 wxs 来写。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/draggable-modal

3. 毛玻璃 tabBar

使用自定义 tarBar，实现模糊半透明的毛玻璃效果，随着页面滚动 tabBar 一直动态变化。

使用 CSS 的 backdrop-filter 来实现。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/custom-tab-bar

4. 页面向右滑直接返回

手机系统为左侧边缘向右滑返回，但如果屏幕过大，操作并不太顺手。

在一些 App 中，实现了直接在页面上右滑返回的效果，例如 Slack 和 Snapchat，体验非常顺滑。

在 Taro 小程序中，首先需要添加一个公共组件，页面均使用此公共组件包裹，然后在公共组件中监听 touch 相关事件。

这里的重点是需要计算滑动的角度，例如 → 这样的可以返回，但 ↘ 和 ↓ 这样的，应该忽略掉。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/touch-move-back

5. 毛玻璃下拉加载效果

小程序原生的下拉加载也不错，但不够特别。FUTAKE 实现了毛玻璃下拉加载效果：

GIF 较模糊，强烈建议体验小程序的实际效果。

同样是监听 touch 事件，但实现更复杂一些，需要根据偏移，处理毛玻璃的模糊度，以及触发 loading 动画等。

在 React 中使用时，要注意将 loading 元素隔离开来，因为 loading 元素是不断 re-render 的。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/blur-loading

6. Swiper 动态列表数据

FUTAKE 使用 Swiper 组件，实现了类似抖音的上下滑动浏览。

但随着列表元素不断增加，小程序将变得卡顿，因为需要实现列表数据的动态化。

展示正在浏览的条目以及前后预载入条目，其它条目展示空元素占位即可。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/use-dynamic-list

7. 双击点赞动画

FUTAKE 实现了类似 Instagram 的对图片双击即可点赞的效果。

同时增加了「喜欢」展示红色 ❤️，「取消喜欢」展示白色 🤍 的逻辑。

🟣 完整代码 → github.com/nanxiaobei/taro-ux-kits/tree/main/double-click-like

👉 欢迎体验 FUTAKE 🗺

👉 访问 FUTAKE 官网 🗺