2024-4-29 用户下单页金额输入交互优化

1.现状以及交互上遇到的问题

在下单页面上，下单按钮一直处于页面底部。当用户输入金额的时候，下面的展示模块会实时刷新，但是由于下单按钮一直在屏幕底下，可能用户并没看到展示模块便下单了。 页面如图：

按钮样式代码如下:

.buttonPart {
    position: absolute;
    bottom: 40%;
    left: 0;
    background: #fff;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}
    

交互同事希望优化一下，用户在输入金额时，下单按钮在页面底部而不是屏幕底部。

2.解决思路

第一次开发的时候，底部按钮是使用绝对定位来实现的，如果要达到以上效果则需要根据金额输入状态来判断。
当用户输入金额时，按钮状态定位状态是相对的在页面底部。当用户输入完金额后，按钮状态是绝对定位，按钮在屏幕底部。

实现代码如下：

    const { isUserTypingBalance } = this.state
    <View className={styles.buttonPart} style={{isUserTypingBalance?'relative':'absolute'}}>
        <ButtonContent/>
    </View>

效果如下：

但是这样实现会有一个问题，由于按钮上方有一些提示文案，展示模块底部内边距预留不够的话会遮挡提示文案，并且还要考虑到适配不同机型的大小。所以这个方案暂时不考虑。
还有另外一种解决思路就是使用flex布局，将页面所有元素区分为非按钮模块A（简称A模块）,和非按钮模块B(简称B模块)。A模块和B模块在一个DOM里使用flex布局，A模块的flex设置为1，B模块的flex shrink属性设置为0，代表页面高度宽度收缩的时候，B模块还是按照原来的比例展示。

3.解决问题的代码实现

具体代码如下：

    <View className={styles.content}>
        <View className={styles.APart}>
            <PartA />
        </View>
        <View ClassName={styles.BPart}>
            <PartB />
        </View>
    </View>

   .content{
       display:flex;
       flex-direction:column;
   }
   
   .Apart:{
       flex: 1;
       overflow-y: scroll;
       overflow-x: hidden;
   }
   
   .BPart:{
       flex-shrink: 0;
        flex-grow: 0;
        left: 0;
        background: #fff;
        position: relative;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
   }

实现的效果如下：

用户未输入金额：

用户输入金额：

我们可以看到，使用flex布局既保证了底部文案在不同机型上不被遮挡，也实现了交互想要的效果，一举两得。