18-微信小程序商城下单页面底部菜单（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-

发表时间：2020-11-17

发布人：葵宇科技

浏览次数：91

下单页面底部菜单

本节主要介绍下单页面的底部菜单界面如何实现。效果如图14-5所示。
在这里插入图片描述
1.布局分析
结构布局分析示意如图14-6所示。

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view ><!--第1层-开始 -->没
    <view>金额</view>
    <view>下单支付</view>     
</view><!--第1层-结束 -->

根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。

2.功能实现

.wxml文件代码示例如下：

<view class="footer">
    
      <view class="howMuch" style='width:50%'>
          <view class="cost">金额：￥253.00</view>
      </view>

      <view class="pay"  style='width:50%' bindtap='zhifu' >下单支付</view>     

</view>

.wxss文件样式代码示例如下：

/*底部菜单*/
.footer{
  display: flex;
  position: absolute;
  right: 0;
  left: 0;
  bottom:0;
  height: 100rpx;
}
.howMuch{
  position: relative;
  flex: 1;
  font-size: 28rpx;
  background: #ECECEC;  line-height: 100rpx;
  padding-left: 10rpx;
}
.cost{
  margin-top: 20rpx;
  color: red;
  font-size: 40rpx; font-weight: bold;
  line-height: 50rpx;
  height: 50rpx;
  margin-left: 50rpx;
}
.pay{
  width: 200rpx;
  text-align: center;
  line-height: 100rpx;
  color: white;
  font-size: 30rpx;
  background: #CCCCCC;
 background:  crimson ;
  color: white;
}