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

下单页面底部菜单

本节主要介绍下单页面的底部菜单界面如何实现。效果如图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;
}

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！