自定义顶部渐变色
效果图:
.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;
}
最后就是效果背景图