微信小程序

您所在的位置：网站首页 › 微信小程序背景颜色代码浅灰色怎么设置 › 微信小程序

微信小程序

2024-06-05 00:29| 来源: 网络整理| 查看: 265

前段时间做了一个微信小程序项目，由于之前自学过H5、vue，所以上手还是很快的。后面将陆续更新一些项目中遇到的问题及解决方案。下面步入正题：原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/9e89e60a1234

场景：

项目中要求导航栏是渐变色/透明色，像下面这样的效果：

渐变导航栏透明导航栏

微信官方提供的导航栏只支持纯色，是无法实现上述效果的。

解决方案：

微信小程序对导航栏提供了两种样式：一种是默认样式，就是支持纯色的那种；另一种是自定义样式，既然是自定义，那我们就可以为所欲为了。嘿嘿

image.png 为了节约时间，在网上搜了一下微信小程序的自定义导航栏，果然已经有大佬为我们实现：https://blog.csdn.net/qq_33744228/article/details/83656588 但是仅支持纯色和透明色，并且每个页面都要做适配（导航栏会覆盖页面内容，不同高度的导航栏要设置不同的“padding-top”）。

为了满足项目要求，在大佬的代码基础上扩充了如下功能： 1、支持渐变色：

利用CSS3提供的线性渐变（linear-gradient）实现：

-webkit-linear-gradient( [ || ,]? , [, ]* )

-webkit-: 表示适配webkit内核的浏览器； [ || ,]?: 表示渐变的起始位置； , [, ]*: 表示渐变的颜色；

例如：

background: -webkit-linear-gradient(top, orange, blue);

表示背景色从顶部开始由橙色渐变为蓝色。

2、组件内适配所有机型：

可以认为导航栏有两部分组成：状态栏+标题栏。不同的机型状态栏高度可能不同(除了刘海屏状态栏高度是44之外，其他手机状态栏高度都是20)，但标题栏高度都是44。微信小程序为我们提供了获取状态栏高度的方法：

wx.getSystemInfoSync().statusBarHeight

所以导航栏的高度为：

wx.getSystemInfoSync().statusBarHeight + 44

由于我们自定义的导航栏使用固定定位实现的，所以他就脱离了文档流，组件放进去后，会悬浮在上面，遮挡了下面的内容，这时候就需要给父元素加个“padding-top”，“padding-top”的值即是导航栏的高度值。这部分可以写到组件内部实现，不用在每个页面都做一次适配。

具体实现：

通过自定义组件实现，具体怎么自定义组件，可以参考官方文档：《自定义组件》。一般自定义组件由 json wxml wxss js 4个文件组成，我这里为了方便实现，多加了两个文件：“back.png” 和 “navigation.wxs”：

image.png “back.png”是导航栏的返回图标；“navigation.wxs”是为了处理渐变这种逻辑，需要渐变的颜色可以以一个数组形式传进来，使用比较方便。如果其他项目需要使用，只需要把navigation目录拖到项目中即可。下面直接贴出具体的实现代码：

navigation.json: { "component": true, "usingComponents": {} } navigation.wxml: {{title}} navigation.wxss: /* 顶部导航 */ .navigation.status-bar { width: 100%; z-index: 99998; position: fixed; top: 0; } .navigation.status-bar .goBack{ position: absolute; top: 7.5px; font-size:12pt; } .navigation.status-bar .goBack image{ width: 22px; height: 22px; padding: 6px 20px 0 15px; } .navigation.status-bar .tabar { display: flex; justify-content: center; background: #fff; } .navigation.status-bar .tabar2{ background: transparent !important; } .navigation.status-bar .tabar2 text{ color: #fff !important; /* font-weight: lighter !important; */ } .navigation.status-bar .tabar text { height: 44px; line-height: 44px; /* padding: 10pt 15pt; */ color: #fff; font-size: 17px; /* font-weight: bold; */ } .navigation.status-bar .tabar .active { color: #fff; } navigation.js: Component({ /* 组件的属性列表 */ properties: { title: { // 设置标题 type: String, value: '' }, title_color: { // 设置标题颜色 type: String, value: '#fff' }, show_bol: { // 控制返回箭头是否显示 type: Boolean, value: true }, my_class: { // 控制样式(背景是否透明) type: Boolean, value: false }, background_color: {//背景颜色 type: String, value: "#24AFFF" }, linear_gradient: { //是否渐变 type: Boolean, value: true }, direction: { //颜色渐变方向 type: String, value: "top" }, color_stops: { //渐变的起止颜色数组 type: Array, value: ["#24AFFF", "#EEE"] }, content_offset: { //内容是否偏移（不让导航栏遮挡内容） type: Boolean, value: true } }, /* 组件的初始数据 */ data: { type: "组件", bar_Height: wx.getSystemInfoSync().statusBarHeight // 获取手机状态栏高度 }, /* 组件的方法列表 */ methods: { goBack: function () { // 返回事件 console.log("退后") wx.navigateBack({ delta: 1, }) } } }) navigation.wxs: var linearGradient = function (isLinearGradient, direction, colorStops) { if (isLinearGradient) { return 'background: -webkit-linear-gradient(' + direction + ',' + colorStops.join(",") + ');'; } return ''; } module.exports = { linearGradient: linearGradient } 下拉刷新问题：

这样实现的导航栏，下拉刷新的动画（三个小圆点）是从屏幕顶部开始的，下拉距离不够大时会被导航栏给盖住。而使用默认的导航栏，下拉刷新动画是从导航栏底部开始的，不会被盖住。如果有哪位大佬解决了这个问题，麻烦告诉我下，不胜感激！

demo下载链接

https://github.com/w-wh/custom-navigation

【本文地址】

微信小程序

微信小程序

今日新闻

推荐新闻