uview实现固定的底部栏目结算项
时间: 2024-03-01 12:55:10 浏览: 27
在UView中,可以使用`uni-sticky`组件来实现固定的底部栏目。首先,在页面中定义一个底部栏目,然后在底部栏目上方加入一个空白的`div`元素,设置高度为底部栏目的高度即可,最后使用`uni-sticky`组件将其固定在底部。底部栏目中的结算项可以使用UView提供的`uni-number-box`组件来实现。
例如:
```html
<template>
<view>
<div style="height: 100px;"></div>
<uni-sticky>
<view class="bottom-bar">
<view class="subtotal">
<text>小计:</text>
<text class="price">¥{{totalPrice}}</text>
</view>
<uni-number-box class="settlement" :min="1" :max="10" :step="1" :value="1"></uni-number-box>
<view class="submit-btn">提交订单</view>
</view>
</uni-sticky>
</view>
</template>
<style>
.bottom-bar {
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.subtotal {
display: flex;
flex-direction: row;
}
.price {
color: #f5222d;
font-size: 18px;
font-weight: bold;
margin-left: 5px;
}
.settlement {
width: 120px;
}
.submit-btn {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #f5222d;
color: #fff;
border-radius: 20px;
font-size: 16px;
}
</style>
```
在上面的代码中,我们在页面中定义了一个高度为100px的空白`div`元素,并在其下方定义了底部栏目。在底部栏目中,使用了`uni-number-box`组件来实现结算项,同时使用了`uni-sticky`组件将其固定在底部。通过调整样式,可以使底部栏目看起来更加美观。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)