安卓 movableview 小程序的步骤条实现代码解析

最近在开发一个安卓移动应用的过程中遇到了一个有趣的UI组件需求，想详细写下解决这个问题的过程。需求是一个动态步骤条状的UI布局，每一步都带有图标和文字，用户点击下一步可以跳转到下一个步骤。在此过程中，我对小程序的代码优化和布局改造进行了深入研究。这次写作主要聚焦于代码实现的逻辑分析和优化。

JS 代码核心逻辑解析

小程序的逻辑主要集中在 page 钩子和 numSteps 方法中。首先看 page 的定义部分：

Page({  data: {    stepList: [      { name: '开始' },      { name: '扫描' },      { name: '付款' },      { name: '完成' }    ],    stepNum: 1  },  onLoad: function () {      },  numSteps: function () {    this.setData({      stepNum: this.data.stepNum == this.data.stepList.length ? 1 : this.data.stepNum + 1    })  }})

这里的关键点在于:

数据定义：stepList 提供了所有步骤的名字，数量共4个；stepNum 用于追踪当前的步骤位置。

初始数据加载：onLoad 钩子其实并没有用到，初始数据已经通过 stepNum 设置为 1 开始。

步骤跳转逻辑：numSteps 方法是关键，它根据当前步骤数是否达到最末步来决定是否循环到第一步，否则加 1。

WXSS 样式优化

对于样式优化，WXSS 提供了丰富的工具支持。主要基础样式如下：

page {  width: 100%;  height: 100%;}.steps_box {  width: 100%;  display: flex;  align-items: center;  justify-content: center;}.block-step {  display: flex;  flex-direction: row;  align-items: center;  justify-content: center;}.view_item {  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;}.view_item text {  font-size: 30rpx;  margin-top: 20rpx;  color: #909090;}.view_item view {  width: 45rpx;  height: 45rpx;  border: 3rpx solid #909090;  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  color: #909090;  font-size: 30rpx;  content: "\e732";}.view_line {  width: 15%;  height: 5rpx;  margin: 0rpx 2% 40rpx 2%;  background: linear-gradient(to right, #eadee0, #a0f1ea);}

主要注意点包括：

Flexbox 布局：采用了 flex 和 align-items 实现横向布局，保证各步骤对齐。

嵌套结构：使用多层嵌套实现了步骤的视觉效果，包括换行和图标展示。

适配性设计：圆形图标和字体大小都做了相应适配，确保在不同屏幕尺寸下显示正常。

WXML 模板结构分析

所谓的步骤条其实主要包含三个部分：

步骤统计图标：使用自定义图标来体现完成度，图标和文字交替使用。

步骤名称与进度条：每个步骤都有明确的名称和对应的图标提示。

动态布局：通过 WX:FOR 实现了循环步骤显示，结合 STEPNUM 动态判断。

具体面的 WXML 结构是这样写的：


     
        
           
               
             
            
              
       
        index+1
             
            
      
               #{item.name}