优雅的用户体验：微信小程序中的多步骤表单引导

前言

在微信小程序中，实现一个多步骤表单引导界面既可以提供清晰的任务指引，又可以增加用户体验的互动性。本文将探讨如何使用微信小程序的特性，构建一个流程引导界面，帮助用户一步步完成复杂任务。我们将从设计布局和样式开始，逐步引导用户完成表单，最终实现一个美观的用户界面。

---

源码如下

wxml 文件

<view class="mainBox">
    <!-- 步骤条 -->
    <view class="stepBox">
        <text class="{{currentStep>=1?'active':''}}">1</text>
        <text class="{{currentStep>=2?'active':''}}">2</text>
        <text class="{{currentStep>=3?'active':''}}">3</text>
        <text class="{{currentStep>=4?'active':''}}">4</text>
        <text class="{{currentStep>=5?'active':''}}">完成</text>
    </view>
    <!-- 内容根据当前步骤进行显示，这里可以放置相应的表单内容等 -->
    <view class="stepConBox">
        <view wx:if="{{currentStep == 1}}">内容111</view>
        <view wx:if="{{currentStep == 2}}">内容222</view>
        <view wx:if="{{currentStep == 3}}">内容333</view>
        <view wx:if="{{currentStep == 4}}">内容444</view>
        <view wx:if="{{currentStep == 5}}">完成</view>
    </view>
    <!-- 操作按钮 -->
    <view class="btnsBox">
        <button wx:if="{{currentStep > 1 && currentStep < 5}}" bindtap="prevStepOn">上一步</button>
        <button wx:if="{{currentStep < 4}}" bindtap="nextStepOn">下一步</button>
        <button wx:if="{{currentStep == 4 || currentStep == 5}}" bindtap="{{currentStep == 4 ? 'submitFormOn' : 'completeOn'}}">{{currentStep == 4 ? '提交' : '完成'}}</button>
    </view>
</view>

js 文件

Page({
    data: {
        currentStep: 1, // 初始化数据，currentStep 代表当前的步骤，初始值为 1
    },
    // 上一步按钮点击事件处理函数
    prevStepOn() {
        // 检查当前步骤是否大于 1，以确保不会回到步骤 0
        if (this.data.currentStep > 1) {
            // 更新数据，将当前步骤减 1
            this.setData({
                currentStep: this.data.currentStep - 1
            });
        }
    },
    // 下一步按钮点击事件处理函数
    nextStepOn() {
        // 检查当前步骤是否小于 4，以确保不会超过最大步骤数
        if (this.data.currentStep < 4) {
            // 更新数据，将当前步骤加 1
            this.setData({
                currentStep: this.data.currentStep + 1
            });
        }
    },
    // 提交按钮点击事件处理函数
    submitFormOn() {
        // 在这里执行提交操作，可以调用相应的接口或处理表单数据
        // 显示提交成功的提示
        wx.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 2000
        });
        // 设置当前步骤为 5，表示已完成
        this.setData({
            currentStep: 5
        });
    },
    // 完成按钮点击事件处理函数
    completeOn() {
        this.setData({
            currentStep: 1
        });
    },
});

wxss 文件

.mainBox {
    padding: 20rpx;
}

/* 定义步骤指示器的样式 */
.stepBox {
    font-size: 28rpx;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
}

/* 定义步骤指示器中的文本样式 */
.stepBox text {
    background: #CEDDF5;
    width: 116rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    border-radius: 8rpx;
}

/* 定义步骤指示器中处于活动状态的文本样式 */
.stepBox text.active {
    background: #477BF7;
}

/* 设置步骤内容容器的内边距 */
.stepConBox {
    padding: 20rpx;
}

/* 定义按钮容器的样式 */
.btnsBox {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* 定义按钮样式 */
.btnsBox button {
    width: 50%;
    font-size: 30rpx;
    font-weight: bold;
    background: linear-gradient(151deg, #2F7EFC 0%, #7BADFC 100%);
    color: #fff;
    border: none;
    border-radius: 50rpx;
}

/* 定义除第一个按钮外的按钮样式，设置左外边距 */
.btnsBox button:nth-child(n+2) {
    margin-left: 20rpx;
}

---

实现思路

以上代码就实现了基于小程序框架的多步骤表单引导界面，其中包含了步骤条、不同步骤下的内容展示和操作按钮。首先，让我们从代码的结构开始解析：

HTML 结构：

mainBox 是整个页面的主容器，包含了步骤条、内容展示区和操作按钮区；
stepBox 是步骤条容器，用于显示当前步骤的进度，通过 class 的条件渲染来表示当前步骤是否激活；
stepConBox 是内容展示区容器，通过 wx:if 条件渲染来显示与当前步骤相关的内容；
btnsBox 是操作按钮区容器，根据当前步骤的不同，展示上一步、下一步、提交和完成按钮。

JavaScript 逻辑：

Page 函数用于定义页面的初始数据，其中 currentStep 初始化为 1，表示当前所在的步骤；
prevStepOn 函数处理上一步按钮的点击事件，确保不会回到步骤 0，通过修改 currentStep 更新界面；
nextStepOn 函数处理下一步按钮的点击事件，确保不会超过最大步骤数，同样通过修改 currentStep 更新界面；
submitFormOn 函数处理提交按钮的点击事件，执行提交操作，例如调用接口或处理表单数据，同时显示提交成功的提示，将 currentStep 设置为 5，表示已完成；
completeOn 函数处理完成按钮的点击事件，将 currentStep 重置为 1，重新开始流程。

• 初始化

  在页面加载时，初始化 currentStep 为 1，显示第一个步骤的内容和相应的步骤条。

• 上一步和下一步

  当用户点击上一步按钮时，检查当前步骤是否大于 1，如果是，就减小 currentStep，并根据新的 currentStep 来渲染相应的内容和步骤条。
  当用户点击下一步按钮时，检查当前步骤是否小于 4，如果是，就增加 currentStep，并根据新的 currentStep 来渲染相应的内容和步骤条。

• 提交表单

  当用户点击提交按钮时，执行提交操作，可以调用后端接口或处理表单数据，然后显示提交成功的提示信息。
  将 currentStep 设置为 5，表示已完成所有步骤。

• 完成流程

  用户完成所有步骤后，可以点击完成按钮，将 currentStep 重置为 1，重新开始整个流程。

---

实现效果

---

拓展

很多情况下，我们每一个步骤中都有一些校验或者规则，只有通过这些校验或者规则才能够进到下一步，这个时候就需要我们对 nextStepOn 方法做出一点调整：

// 下一步按钮点击事件处理函数
nextStepOn() {
    // 获取当前步骤
    const currentStep = this.data.currentStep;
    // 根据当前步骤进行条件判断
    switch (currentStep) {
        case 1:
            // 在第一步的条件判断
            if (满足step1条件) {
                this.setData({
                    currentStep: 2
                });
            } else {
                wx.showToast({
                    title: 'step1条件不满足，无法进入下一步',
                    icon: 'none',
                    duration: 2000
                });
            }
            break;
        case 2:
            // 在第二步的条件判断
            if (满足step2条件) {
                this.setData({
                    currentStep: 3
                });
            } else {
                wx.showToast({
                    title: 'step2条件不满足，无法进入下一步',
                    icon: 'none',
                    duration: 2000
                });
            }
            break;
        case 3:
            // 在第三步的条件判断
            if (满足step3条件) {
                this.setData({
                    currentStep: 4
                });
            } else {
                wx.showToast({
                    title: 'step3条件不满足，无法进入下一步',
                    icon: 'none',
                    duration: 2000
                });
            }
            break;
        case 4:
            // 第四步是最后一步，不需要进入下一步
            wx.showToast({
                title: '已完成',
                icon: 'success',
                duration: 2000
            });
            break;
        default:
            // 处理不明确的步骤
            wx.showToast({
                title: '无效的步骤',
                icon: 'none',
                duration: 2000
            });
            break;
    }
},

实现效果

---

相关推荐

⭐ 让你的物流信息一目了然：微信小程序实现进度展示