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