微信小程序底部工具栏开发

最新推荐文章于 2024-09-01 22:07:00 发布

“负拾捌”

最新推荐文章于 2024-09-01 22:07:00 发布

阅读量836

点赞数

分类专栏：微信小程序文章标签：小程序 flex css

本文链接：https://blog.csdn.net/qq_49438920/article/details/116446900

版权

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

27 篇文章 1 订阅

订阅专栏

微信小程序底部工具栏开发

1.效果图：
包含联系客服、分享、购物车、加入购物车、立即购买几个模块
在这里插入图片描述
2.wxml：

<view class="bottom_tool">//最外层容器
  <view class="bottom_item">//客服、分享、购物车三个模块的公共类
    <view class="iconfont icon-icon-test"></view>//图标
    <view>联系客服</view>//图标下层文字
    <button open-type="contact"></button>
    //button open—type 为contact 是联系客服
  </view>
  <view class="bottom_item">
    <view class="iconfont icon-Group-"></view>
    <view>分享</view>
    <button open-type="share"></button>
    //button open—type 为share 是分享
  </view>
  <navigator
   open-type="switchTab"
   class="bottom_item"
  url="/pages/cart/index">
  //若要跳转到tabBar页面则需要在navigator的open-type设置为switchTab
    <view class="iconfont icon-gouwuche"></view>
    <view>购物车</view>
  </navigator>
    <view class="bottom_cart">加入购物车</view>
    <view class="bottom_buy">立即购买</view>
</view>

3.wxss：

.bottom_tool{
    border-top: 1px solid #ccc;
    position: fixed;  //固定定位到页面底部
    left:0;
    bottom:0;
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    display: flex; //设置弹性盒子

    .bottom_item{
        position: relative;
        font-size: 25rpx;
        flex: 1;   //占1份
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column; //弹性盒子方向垂直
    }
    button{
        position: absolute;//与最外层容器父相子绝
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;//不透明度为0
    }
    .bottom_cart{
        color: #fff;
        font-size: 30rpx;
        background-color: #ffa500;
        flex: 2;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .bottom_buy{
        font-size: 30rpx;
        color: #fff;
        background-color: #eb4450;
        flex: 2;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}

4.重点：
1.button 的open-type为contact 时联系客服，
2.button 的open-type为share 时分享，
3.navigator 无法跳转至tabBar，若想跳转则在navigator设置open-type为switchTab,则可以跳转至tabBar并关闭其他所有页面