541 lines
14 KiB
Markdown
541 lines
14 KiB
Markdown
|
既然**阶段 1：后端 API 增强**（包括 `NameCard` 模型适配、`MiniMaxService` 的多模式 Prompt 引擎、以及 `NamingController` 的参数接收）已经开发完成，那么接下来的核心目标是**完成前端的“大换装”**。
|
|||
|
|
|
|||
|
|
下一阶段（**阶段 2**）我们将聚焦于**前端重设计 - 输入页 (`home` 页面)**。这是用户进入小程序的第一印象，目标是实现“极简”与“仪式感”。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 下一阶段开发规划：前端极简输入页重构
|
|||
|
|
|
|||
|
|
## 🎯 阶段目标
|
|||
|
|
重写 `home` 页面，实现多模式选择、水墨晕开动画效果，并对接已完成的后端多模式接口。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2.1 结构重构 (`home.wxml`)
|
|||
|
|
需要打破原有简单的输入框布局，引入模式切换逻辑。
|
|||
|
|
* **模式切换器**：
|
|||
|
|
* 使用 `wx:for` 渲染“宝宝”、“人设”、“拾遗”三个标签。
|
|||
|
|
* 绑定 `bindtap="selectMode"`，通过 `data-id` 切换状态。
|
|||
|
|
* **输入增强**：
|
|||
|
|
* 保留 `keyword` 输入框。
|
|||
|
|
* **可选**：根据 `step2.md` 预留 `surname`（姓氏）输入框（仅在“宝宝”模式下通过显隐逻辑控制展示）。
|
|||
|
|
* **动画占位**：
|
|||
|
|
* 新增 `<canvas>` 或 `<view>` 容器用于承载“墨水滴入水中”的加载动效。
|
|||
|
|
|
|||
|
|
## 2.2 视觉与动效设计 (`home.wxss`)
|
|||
|
|
这是体现“见素”品牌美学的关键。
|
|||
|
|
* **全局样式变量应用**：
|
|||
|
|
* 使用 `var(--jiansu-text)` 等变量。
|
|||
|
|
* 设置 `font-family: "Noto Serif SC"`，确保宋体质感。
|
|||
|
|
* **交互动效**：
|
|||
|
|
* **选中态**：选中的模式下方显示一个逐渐生成的微小黑点或下划线。
|
|||
|
|
* **水墨加载动画**：编写 CSS `animation`。利用 `radial-gradient` 和 `opacity` 的变化，模拟墨滴在水中不规则扩散、变淡的效果。
|
|||
|
|
* **按钮排版**：
|
|||
|
|
* `.generate-btn`：背景全黑，文字留白，无圆角，增加 `letter-spacing`。
|
|||
|
|
|
|||
|
|
## 2.3 交互逻辑实现 (`home.js`)
|
|||
|
|
* **初始化管理**：
|
|||
|
|
```javascript
|
|||
|
|
data: {
|
|||
|
|
modes: [
|
|||
|
|
{ id: 'baby', name: '宝宝' },
|
|||
|
|
{ id: 'persona', name: '人设' },
|
|||
|
|
{ id: 'classic', name: '拾遗' }
|
|||
|
|
],
|
|||
|
|
activeMode: 'baby',
|
|||
|
|
isGenerating: false, // 控制加载动画和按钮禁用
|
|||
|
|
keyword: '',
|
|||
|
|
surname: ''
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
* **模式切换逻辑**：点击切换 `activeMode`，同时清空或保留当前输入内容。
|
|||
|
|
* **提交跳转逻辑**：
|
|||
|
|
1. 校验 `keyword` 是否为空。
|
|||
|
|
2. 触发 `isGenerating: true`，显示水墨动画。
|
|||
|
|
3. **延迟跳转**：为了让用户看到动画（仪式感），建议设置 800ms-1200ms 的延迟，再执行 `wx.navigateTo`。
|
|||
|
|
4. 组装 URL：`/pages/index/index?mode=baby&keyword=平安&surname=张`。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ✅ 验收标准
|
|||
|
|
1. **视觉**：首页字体呈现思源宋体，布局高度留白，符合极简美学。
|
|||
|
|
2. **交互**：点击不同模式有清晰的选中反馈。
|
|||
|
|
3. **流程**：点击“求名”后，先出现水墨晕开动效，随后平滑跳转至卡片页。
|
|||
|
|
4. **接口**：确认跳转时携带了正确的 `mode` 和 `surname` 参数。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
好的，我们现在开始 **阶段 2** 的具体代码实现。
|
|||
|
|
|
|||
|
|
这一部分的重点在于**视觉层面的“仪式感”**。我们将通过 CSS 动画实现“水墨滴入水中晕开”的效果，并构建极简的模式选择器。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 1. 结构层：`home.wxml`
|
|||
|
|
在 `home.wxml` 中，我们需要构建模式标签和动画容器。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="mode-selector">
|
|||
|
|
<view
|
|||
|
|
wx:for="{{modes}}"
|
|||
|
|
wx:key="id"
|
|||
|
|
class="mode-item {{activeMode === item.id ? 'active' : ''}}"
|
|||
|
|
bindtap="selectMode"
|
|||
|
|
data-id="{{item.id}}"
|
|||
|
|
>
|
|||
|
|
<text>{{item.name}}</text>
|
|||
|
|
<view class="dot" wx:if="{{activeMode === item.id}}"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="main-content">
|
|||
|
|
<view class="input-group">
|
|||
|
|
<input
|
|||
|
|
wx:if="{{activeMode === 'baby'}}"
|
|||
|
|
class="surname-input"
|
|||
|
|
placeholder="姓"
|
|||
|
|
placeholder-class="p-class"
|
|||
|
|
bindinput="onSurnameInput"
|
|||
|
|
maxlength="2"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
class="keyword-input"
|
|||
|
|
placeholder="{{activeMode === 'persona' ? '输入你的职业、性格或期望' : '输入意向字或意境'}}"
|
|||
|
|
placeholder-class="p-class"
|
|||
|
|
bindinput="onKeywordInput"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="btn-container">
|
|||
|
|
<button class="generate-btn" bindtap="startGenerate" disabled="{{isGenerating}}">
|
|||
|
|
<text wx:if="{{!isGenerating}}">求名</text>
|
|||
|
|
<view wx:else class="ink-loading"></view>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="ink-overlay {{isGenerating ? 'show' : ''}}"></view>
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 2. 表现层：`home.wxss`
|
|||
|
|
这里我们定义全局 CSS 变量，并利用 `radial-gradient` 实现水墨动效。
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 模式选择器样式 */
|
|||
|
|
.mode-selector {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 100rpx;
|
|||
|
|
gap: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mode-item {
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: var(--jiansu-accent);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mode-item.active {
|
|||
|
|
color: var(--jiansu-text);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mode-item .dot {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 6rpx;
|
|||
|
|
height: 6rpx;
|
|||
|
|
background: var(--jiansu-text);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: fadeIn 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 输入框样式 */
|
|||
|
|
.input-group {
|
|||
|
|
margin-top: 150rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.keyword-input, .surname-input {
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
width: 80%;
|
|||
|
|
font-family: var(--jiansu-font);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 求名按钮 - 极致方正 */
|
|||
|
|
.generate-btn {
|
|||
|
|
background: var(--jiansu-text) !important;
|
|||
|
|
color: #fff !important;
|
|||
|
|
border-radius: 0 !important;
|
|||
|
|
width: 240rpx !important;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
margin-top: 100rpx;
|
|||
|
|
font-weight: 300;
|
|||
|
|
letter-spacing: 10rpx;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 水墨晕开动画遮罩 */
|
|||
|
|
.ink-overlay {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #fff;
|
|||
|
|
z-index: 100;
|
|||
|
|
pointer-events: none;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ink-overlay.show {
|
|||
|
|
animation: inkSpread 1.2s ease-in-out forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes inkSpread {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
clip-path: circle(0% at 50% 50%);
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
opacity: 1;
|
|||
|
|
clip-path: circle(100% at 50% 50%);
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
clip-path: circle(150% at 50% 50%);
|
|||
|
|
background: #fff; /* 最后切回到白色，准备进入下一页 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 3. 逻辑层：`home.js`
|
|||
|
|
处理参数组装和仪式感跳转。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
Page({
|
|||
|
|
data: {
|
|||
|
|
modes: [
|
|||
|
|
{ id: 'baby', name: '宝宝' },
|
|||
|
|
{ id: 'persona', name: '人设' },
|
|||
|
|
{ id: 'classic', name: '拾遗' }
|
|||
|
|
],
|
|||
|
|
activeMode: 'baby',
|
|||
|
|
keyword: '',
|
|||
|
|
surname: '',
|
|||
|
|
isGenerating: false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectMode(e) {
|
|||
|
|
const { id } = e.currentTarget.dataset;
|
|||
|
|
this.setData({ activeMode: id });
|
|||
|
|
// 切换模式时可以播放一个轻微的震动反馈
|
|||
|
|
wx.vibrateShort({ type: 'light' });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onKeywordInput(e) {
|
|||
|
|
this.setData({ keyword: e.detail.value });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onSurnameInput(e) {
|
|||
|
|
this.setData({ surname: e.detail.value });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
startGenerate() {
|
|||
|
|
if (!this.data.keyword) {
|
|||
|
|
wx.showToast({ title: '请输入关键词', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开启仪式感动画
|
|||
|
|
this.setData({ isGenerating: true });
|
|||
|
|
|
|||
|
|
// 延迟 1s 跳转，等待水墨动效执行到视觉重心位置
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const { keyword, activeMode, surname } = this.data;
|
|||
|
|
const url = `/pages/index/index?keyword=${encodeURIComponent(keyword)}&mode=${activeMode}&surname=${encodeURIComponent(surname)}`;
|
|||
|
|
|
|||
|
|
wx.navigateTo({
|
|||
|
|
url,
|
|||
|
|
complete: () => {
|
|||
|
|
// 页面跳转后重置加载状态，确保返回时按钮可用
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.setData({ isGenerating: false });
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 🎨 接下来你可以做的优化：
|
|||
|
|
1. **字体引入**：在 `app.wxss` 中确保 `@import` 了思源宋体的网络字体。
|
|||
|
|
2. **视觉微调**：`inkSpread` 动画中的 `clip-path` 效果非常吃性能，如果低端机型卡顿，可以改用 `opacity` 和 `scale` 的简单组合。
|
|||
|
|
|
|||
|
|
**这部分代码完成后，前端的“多模式入口”就彻底打通了。下一步我们需要处理的是 `index` 卡片页的适配，包括接收这些参数并显示对应的头部信息。需要继续吗？**
|
|||
|
|
|
|||
|
|
既然首页的“水墨仪式感”已经铺设好，我们进入**阶段 3：前端适配 - 卡片页 (`index`)**。
|
|||
|
|
|
|||
|
|
这一阶段的任务是让卡片页能够“听懂”首页传来的参数，并在视觉上呈现出「见素」品牌的统一感：**散文诗排版**、**操作栏重构**以及**顶部状态展示**。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 1. 结构层：`index.wxml`
|
|||
|
|
我们需要在顶部增加当前模式的展示，并重构底部的交互按钮。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="header-info">
|
|||
|
|
<text class="brand">见素</text>
|
|||
|
|
<text class="divider">·</text>
|
|||
|
|
<text class="mode-tag">{{currentModeDisplay}}</text>
|
|||
|
|
<text class="divider">·</text>
|
|||
|
|
<text class="keyword-tag">{{currentKeyword}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card-stack">
|
|||
|
|
<view
|
|||
|
|
wx:for="{{nameList}}"
|
|||
|
|
wx:key="id"
|
|||
|
|
class="card {{index === currentIndex ? 'active' : ''}}"
|
|||
|
|
style="z-index: {{nameList.length - index}}"
|
|||
|
|
>
|
|||
|
|
<view class="card-front">
|
|||
|
|
<text class="name-text">{{item.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card-back">
|
|||
|
|
<view class="origin">—— {{item.origin}}</view>
|
|||
|
|
<view class="description">
|
|||
|
|
<text>{{item.description}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="score-badge">五行 {{item.tone}} · 意蕴 {{item.score}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="action-bar">
|
|||
|
|
<view class="action-btn back-home" bindtap="onBack">
|
|||
|
|
<view class="icon-back"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="main-actions">
|
|||
|
|
<view class="circle-btn dislike" bindtap="onDislike">
|
|||
|
|
<text>×</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="circle-btn like" bindtap="onLike">
|
|||
|
|
<text>♥</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-btn share" bindtap="onSavePoster">
|
|||
|
|
<view class="icon-share"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 2. 表现层：`index.wxss`
|
|||
|
|
这里的重点是**散文诗般的行间距**和底部的**悬浮感按钮**。
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 顶部信息流 */
|
|||
|
|
.header-info {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 40rpx 0;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: var(--jiansu-accent);
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-info .brand {
|
|||
|
|
color: var(--jiansu-text);
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
margin: 0 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 卡片背面排版优化 */
|
|||
|
|
.card-back {
|
|||
|
|
padding: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-back .description {
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
line-height: 1.8; /* 散文诗般的行高 */
|
|||
|
|
color: var(--jiansu-text);
|
|||
|
|
text-align: justify;
|
|||
|
|
letter-spacing: 1rpx;
|
|||
|
|
white-space: pre-wrap; /* 保持后端返回的换行 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部操作栏 */
|
|||
|
|
.action-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 80rpx;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 60rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle-btn {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 1rpx solid #eee;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle-btn:active {
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle-btn.like {
|
|||
|
|
color: #e74c3c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle-btn.dislike {
|
|||
|
|
color: #95a5a6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 80rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 返回图标（简单线条实现） */
|
|||
|
|
.icon-back {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-left: 2rpx solid var(--jiansu-accent);
|
|||
|
|
border-top: 2rpx solid var(--jiansu-accent);
|
|||
|
|
transform: rotate(-45deg);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 3. 逻辑层：`index.js`
|
|||
|
|
这里需要处理参数接收和多模式的映射。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
Page({
|
|||
|
|
data: {
|
|||
|
|
currentKeyword: '',
|
|||
|
|
currentMode: '',
|
|||
|
|
currentModeDisplay: '',
|
|||
|
|
currentIndex: 0,
|
|||
|
|
nameList: []
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(options) {
|
|||
|
|
const { keyword, mode, surname } = options;
|
|||
|
|
|
|||
|
|
// 建立模式 ID 到中文名称的映射
|
|||
|
|
const modeMap = {
|
|||
|
|
'baby': '宝宝起名',
|
|||
|
|
'persona': '人设灵感',
|
|||
|
|
'classic': '拾遗经典'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
currentKeyword: keyword,
|
|||
|
|
currentMode: mode,
|
|||
|
|
currentModeDisplay: modeMap[mode] || '起名'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.fetchNames(keyword, mode, surname);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
fetchNames(keyword, mode, surname) {
|
|||
|
|
wx.showLoading({ title: '灵感汇聚中...' });
|
|||
|
|
|
|||
|
|
wx.request({
|
|||
|
|
url: 'https://your-api.com/api/naming/generate', // 替换为你的后端地址
|
|||
|
|
method: 'GET',
|
|||
|
|
data: { keyword, mode, surname },
|
|||
|
|
success: (res) => {
|
|||
|
|
this.setData({
|
|||
|
|
nameList: res.data
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
wx.showToast({ title: '灵感中断，请重试', icon: 'none' });
|
|||
|
|
},
|
|||
|
|
complete: () => {
|
|||
|
|
wx.hideLoading();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onBack() {
|
|||
|
|
wx.navigateBack();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLike() {
|
|||
|
|
// 逻辑：当前卡片右滑移出，并加入收藏
|
|||
|
|
this.handleCardExit('right');
|
|||
|
|
wx.vibrateShort({ type: 'medium' });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onDislike() {
|
|||
|
|
// 逻辑：当前卡片左滑移出
|
|||
|
|
this.handleCardExit('left');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleCardExit(direction) {
|
|||
|
|
// 这里触发卡片动画逻辑（如果你使用的是 CSS 动画控制 class）
|
|||
|
|
// ... 原有的滑块逻辑适配 ...
|
|||
|
|
this.setData({
|
|||
|
|
currentIndex: this.data.currentIndex + 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 🛠 阶段性检查点
|
|||
|
|
1. **参数接收**：确认 `index.js` 能正确拿到 `mode` 和 `keyword`。
|
|||
|
|
2. **视觉审美**：检查卡片背面的 `line-height` 是否足够舒展，是否像一段现代诗。
|
|||
|
|
3. **按钮交互**：点击底部的 `×` 和 `♥` 应该能触发卡片的切换效果（即使你不去手动滑动）。
|