微信小程序布局底部位置固定例子

最新推荐文章于 2025-06-11 13:11:18 发布

沈阳-施立

最新推荐文章于 2025-06-11 13:11:18 发布

阅读量3.1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/winnershili/article/details/81363540

微信小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一款小程序中购物车及自定义底部导航的设计实现方法。通过展示wxml和wxss代码片段，详细说明了如何创建固定在底部的logo，并配以蓝色渐变背景效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常会用到的地方就是购物车,还有自己定义的底部导航等等

效果图

wxml

<!--index.wxml-->
<view class='container'>
  <view class="logo">
    <image src='/images/avic_logo.png'></image>
    <view class="logo_ground"></view>
  </view>
</view>

wxss

/**index.wxss**/
page{
  background-color: #bcbcbc;
}

.logo{
  width: 100%;
  position: fixed;
  bottom:0px;
  display: flex;
  justify-content: center;
}

.logo image{
  width: 200rpx;
  height: 200rpx;
}

.logo_ground{
  position: fixed;
  width: 100%;
  height: 50rpx;
  bottom:0px;
  background-color: blueviolet;
  z-index: -1;
}