1200字范文 > 微信小程序——1 自定义顶部渐变色2 封装好的自定义顶部栏（父组件获取子组件的点击

微信小程序——1 自定义顶部渐变色2 封装好的自定义顶部栏（父组件获取子组件的点击

时间：2020-08-27 01:02:16

1、自定义顶部渐变色

第一种使用代码实现渐变

效果图：

.json代码

"navigationStyle":"custom"

.wxml代码

.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")}

组件的代码下载地址：/download/wy313622821/15560669

微信小程序——1 自定义顶部渐变色2 封装好的自定义顶部栏（父组件获取子组件的点击事件）

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。