这是一个创建于 1167 天前的主题，其中的信息可能已经有所发展或是发生改变。
使用 Taro 开发 FUTAKE 小程序时，7 个与用户体验有关的优化。
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
 |
1
Valid 2021-09-14 22:12:09 +08:00
sheet modal 是自己写的吗
|
 |
2
nanxiaobei OP @Valid 是的，利用上面那个已有 model 实现的
|
 |
3
7gugu 2021-09-15 00:12:27 +08:00
楼主牛逼！
|
 |
4
newbieRenew 2021-09-15 00:12:34 +08:00 via iPhone
我想知道这个框架能用 React Hook 嘛? 之前看要管理一堆周期，头大，弃之。
|
 |
5
FightPig 2021-09-15 00:15:41 +08:00
taro 升 3 后性能有点差，不知道现在怎么样了，好久没用了
|
|
6
nanxiaobei OP @7gugu #3 😏
|
|
7
nanxiaobei OP @newbieRenew #4 是的，Taro 可以全部 Hooks 开发，没有一个 class 组件
|
|
8
nanxiaobei OP @FightPig #5 我之前也没用过 Taro 2，不太了解 😂
|
|
9
FightPig 2021-09-15 08:30:42 +08:00
@nanxiaobei 我从 1 用到 3，然后 3 性能有点问题，不过开发起来真舒服
|
 |
10
dcalsky 2021-09-15 09:00:39 +08:00
图片审核这块怎么做的？每张图都审核吗
|
 |
11
wanxiankai 2021-09-15 10:25:32 +08:00  1
体验了一下非常 nice，刚好最近把公司的小程序从 Taro 1.3.22 升级到了 3.2.0，可以参考你的再做一波优化，感谢分享！
|
|
12
nanxiaobei OP |
|
13
nanxiaobei OP @wanxiankai #11 😏
|
 |
14
lycode 2021-09-15 18:11:21 +08:00
很需要这个 touch，好好向楼主学习
|
|
15
nanxiaobei OP @lycode #14 😂
|
|
16
Valid 2021-09-16 12:17:18 +08:00 1
满满的干货
@nanxiaobei |
|
17
nanxiaobei OP @Valid #16 感谢！
|
 |
18
Macolor21 2021-09-16 18:20:35 +08:00
点赞->登录->获取手机号码->登录->获取微信昵称和头像->昵称重复 X -> 跳回第一步或者继续获取
意思是我还需要改个微信昵称才能用你的账号啊？重新定义用户体验 |
|
19
Macolor21 2021-09-16 18:21:58 +08:00
@Macolor21 我知道，有人要提了，微信可以自定义多个用户昵称和头像用于这类场景。是的，直接获取信息的时候就可以改，然后呢，改完之后你按确定，显示手机号码获取失败！又让你获取一遍
|
|
20
nanxiaobei OP @Macolor21 昵称重复？等我问问接口怎么处理的，理论上不应该有这个提示
|
Select Language