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

    前言

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

    源码如下

    wxml 文件

    <view class="mainBox">
    
    <view class="stepBox">
        <text class="{{currentStep>=1?'active':''}}">1text>
        <text class="{{currentStep>=2?'active':''}}">2text>
        <text class="{{currentStep>=3?'active':''}}">3text>
        <text class="{{currentStep>=4?'active':''}}">4text>
        <text class="{{currentStep>=5?'active':''}}">完成text>
    view>
    
    <view class="stepConBox">
        <view wx:if="{{currentStep == 1}}">内容111view>
        <view wx:if="{{currentStep == 2}}">内容222view>
        <view wx:if="{{currentStep == 3}}">内容333view>
        <view wx:if="{{currentStep == 4}}">内容444view>
        <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    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
        });
    },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    实现思路

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

    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;
    }
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    实现效果

    在这里插入图片描述

    相关推荐

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

  • 相关阅读:
    【汇编】寄存器——内存访问内存中字的存储方式、DS和[address]、DS[]和CS:IP的区别、MOV,ADD,SUB、数据段与代码段的区别
    【办公技巧】如何编辑带有限制编辑密码的PDF文件？
    Unity粒子系统ParticleSystem各模块及其参数学习
    初步了解android如何锁键
    【Redis】共同关注列表与基于Feed流的关注消息滚动分页推送的实现
    什么是运维自动化巡检？
    专业技术人员的几种有效的薪酬制度模式
    22 多元正太总体的假设检验
    基于极狐GitLab OpenAPI 开发一个仿dbt的版本管理WebIDE
    gitlab-rake gitlab:backup:create 执行报错 Errno::ENOSPC: No space left on device
  • 原文地址：https://blog.csdn.net/Shids_/article/details/133752682