⼩程序——1、⾃定义顶部渐变⾊2、封装好的⾃定义顶部栏（⽗组件获取
⼦组件的点击事件）
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);
success:(res)=>{
// console.log("==获取系统信息==");
// console.log(res)
var statusBarHeight = res.statusBarHeight;//顶部状态栏⾼度
this.globalData.capsuleObj = capsuleObj;
this.globalData.titleHeight = statusBarHeight + capsuleObj.height +(p - 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>
⽗组件获取⼦组件的点击事件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论