微信小程序自制底部菜单栏

子容器横向布局，在父容器添加最后两行

.bar{width: 100%;height: 10%;border: lightgray 1px solid;position: absolute;bottom: 0px;display: flex;flex-direction: row;
}

自适应容器设置不了文字居中

.jia{width: 40%;height: 60%;border: 1px solid black;border-radius: 25px;margin-left: 5%;text-align: center;line-height: 100%;
}

找教程搬代码

.jia{width: 40%;height: 60%;border: 1px solid black;border-radius: 25px;margin-top: 10px;margin-left: 5%;display: flex;align-items: center;    /*实现上下居中*/justify-content: center;    /*实现水平居中*/
}

背景颜色渐变

    background: linear-gradient(to right, #2c9dff, #39dfe7);

//自己做了尝试做了下自适应屏幕的底部栏效果还不错

总结一下

<view class="bar"><view class="jia">加入书架</view><view class="yue">开始阅读</view>
</view>

.bar{width: 100%;height: 10%;border: lightgray 1px solid;position: absolute;bottom: 0px;display: flex;flex-direction: row;
}
.jia{width: 40%;height: 60%;border-radius: 25px;margin-top: 10px;margin-left: 5%;display: flex;align-items: center;    /*实现上下居中*/justify-content: center;    /*实现水平居中*/background-color: #f3f3f3;
}
.yue{width: 40%;height: 60%;border-radius: 25px;margin-left: 9%;margin-top: 10px;display: flex;align-items: center;justify-content: center;background: linear-gradient(to right, #2c9dff, #39dfe7);
}

模拟机型没问题

12mini真机测试没问题

微信小程序自制底部菜单栏相关推荐

微信小程序的底部菜单栏实现和界面顶部显示
准备工作: 阿里图标库https://www.iconfont.cn/collections/detail?cid=29 在这个网站上下载一些自己要用到的图标,比如人员头像,home主页等一些常用的图 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
小程序自定义底部菜单栏
问题:小程序的底部菜单栏基本的样式根本不能满足我们的审美要求,所以我们可以通过自己来自定义一套小程序底部栏,可以设置透明背景哟,想要什么样式都可以自己定义,好了,废话不多说,直接上代码! 首先在和pa ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序之底部栏tabBar
tabBar是微信小程序的底部导航栏,它是微信自带的一个框架. 微信小程序自定义tabBar的描述 tabBar需要在app.json书写. 这是我的app.json {"pages&quo ...
微信小程序scroll-view底部内容无法完全显示
微信小程序scroll-view底部内容无法完全显示真机调试时,滑动到最底部,松手无法显示最底部的内容,如图: 需要在scroll-view组件内的最后加一个空白组件view在占位,使最后的信息能够 ...

微信小程序自制底部菜单栏

微信小程序自制底部菜单栏相关推荐

最新文章

热门文章