1、自定义顶部渐变色

第一种使用代码实现渐变

效果图：

.json代码

"navigationStyle":"custom"

.wxml代码

<view class="view_contain_tuibian">
  <view class="view_top_tuibian">

    <view class="view_tupianwenzi">
      <image class="image_tupian" src="../../images/qushi.png"></image>
      <text class="text_1">打车</text>
    </view>
    <view class="view_tupianwenzi" bindtap="webViewAll" id="2">
      <image class="image_tupian" src="../../images/qushi.png"></image>
      <text class="text_1">门票</text>
    </view>
    <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
      <image class="image_tupian" src="../../images/qushi.png"></image>
      <text class="text_1">酒店</text>
    </view>
    <view class="view_tupianwenzi" bindtap="webViewAll" id="6">
      <image class="image_tupian" src="../../images/qushi.png"></image>
      <text class="text_1">更多</text>
    </view>
    
  </view>
</view>

.wxss代码

page {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}

.view_contain_tuibian {
  width: 100%;
  height: 500rpx;
  /* 背景渐变色 */
  background: linear-gradient(#ff69b4, #fc98ee, #f8f8f8);
  position: absolute;
}

/* 圆角框框 */
.view_top_tuibian {
  width: 96%;
  height: 300rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin: 150rpx 2% 20rpx 2%;
}

/* 4个图标文字 */
.view_tupianwenzi {
  display: flex;
  flex-direction: column;
  width: 130rpx;
  align-items: center;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

/* 图标 */
.image_tupian {
  display: flex;
  width: 80rpx;
  height: 80rpx;
}

第二种使用图片实现渐变

效果图：

.json

"navigationStyle":"custom"

wxml

<view class="view_top">
	<image class="image_top_1" src="../images/new_top_bg.png"></image>
	<view class="view_bt">
		<text class="text">标题</text>
		<button class="bt_1">提交</button>
		<button class="bt_1">取消</button>
	</view>
</view>

wxss

.view_top {
  width: 100%;
  height: 160rpx;
  position: relative;
  /* display: flex;
  justify-content: center; */
}

.image_top_1 {
  width: 100%;
  height: 100%;
  position: absolute;
}


.view_bt {
  width: 100%;
  display: flex;
  flex-direction: row;
  
  margin-left: 10rpx;
  margin-right: 10rpx;

  margin-top: 45rpx;
  /* justify-content: center; */
  
  align-items: center;

  position: absolute; 
  /* 要约束所在位置的子元素的位置要设置成绝对 */


}

.text{
  width: 150rpx;
  margin-top: 25rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.bt_1 {
  margin-left: 10rpx;
  margin-right: 10rpx;

  width: 150rpx;
  height: 65rpx;
  color: #6699FF;
  border: 3rpx solid #6699FF;
  border-radius: 80rpx;
  font-size: 35rpx;
  margin-top: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}

最后就是效果背景图

2、封装好的自定义顶部导航栏

效果图：

使用：

1、在***.json内设置自定义和引入组件

 "navigationStyle": "custom",
  "customHeader": "/components/customHeader/index"

2、顶部高度计算方法在app.js里。

onLaunch里写入代码：

// 获取自定义顶部高度相关参数
        let capsuleObj = wx.getMenuButtonBoundingClientRect();
        // console.log("==胶囊信息==");
        // console.log(capsuleObj);

        wx.getSystemInfo({
            success: (res) => {
                // console.log("==获取系统信息==");
                // console.log(res)
                var statusBarHeight = res.statusBarHeight; //顶部状态栏高度

                this.globalData.capsuleObj = capsuleObj;
                this.globalData.titleHeight = statusBarHeight + capsuleObj.height + (capsuleObj.top - statusBarHeight) * 2;
            },
            failure() {
            }
        })

在globalData里添加代码：

loginStatus: false,

3、图标跳转的方法，在customHeader组件的index.js里，可以自行修改链接，默认跳转方法wx.navigateTo方法。如果想调转到tabBar页面，请用wx.switchTab方法。

4、在需要的.wxml页面里添加

a、三个横杠

<customHeader menuFlag customTitle="点击进入菜单"></customHeader>

b、返回箭头和首页

<customHeader backHomeFlag customTitle="带返回和首页"></customHeader>

c、无返回箭头和首页

<customHeader customTitle="没有返回和首页的"></customHeader>

父组件获取子组件的点击事件

功能：可以使得component内组件的点击事件传到主调用方



左上角的返回按钮点击后在index.js里面可以获得事件

<view class="customHeader_box" style="height:{{titleHeight}}px; background-color:{{bgColor}};">
    <!-- 返回+首页 -->
    <view wx:if="{{backFlag}}" class="backHome_no_box" style="width:{{capsuleObj.width}}px; height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
        <view class="customIcon " bindtap="backClick">
            <image src="/images/customBack.png"></image>
        </view>
    </view>

    <!-- 标题 -->
    <view class="customHeader_title" style="top:{{capsuleObj.top}}px; height:{{capsuleObj.height}}px; line-height:{{capsuleObj.height}}px;">
        {{customTitle}}
    </view>
</view>

子组件wxml中绑定了backClick事件，在js中调用方法如下：

Component({
  properties: {//父级组件传来的参数
    workList: {
      type: Array,
      value: []
    },
  },
  data: {
    work_tabindex: 0, //当前tab序号
  },
  methods: {
     backClick: function() {      
            this.triggerEvent('back_main')            
        },   
  }
})

父组件首先在wxml里接收triggerEvent里面传来的back_main，然后调用事件，方法如下：

<customHeader  backFlag  customTitle="点击进入菜单"  bind:back_main="back_main_i"></customHeader>

然后，父组件要在js里面执行back_main_i：

  back_main_i(e) {
    console.log("11111111")
  }

组件的代码下载地址：

https://download.csdn.net/download/wy313622821/15560669