uniapp Wechat 애플릿 navigationBarBackgroundColor 제목 표시줄 색상 그라데이션

일반 아이디어: 1단계: "navigationStyle": "custom"
2단계: 템플릿에서 강조: 보기에 ref="top" 추가
3단계: 그라데이션 스타일 추가

1. 페이지.json

{
    
    
  "path" : "pages/user/user",
    "style" :                                                                                    
    {
    
    
        "navigationBarTitleText": "我的",
		"navigationBarTextStyle":"black",//标题栏字体颜色
		"navigationBarBackgroundColor": "#1890FF",//标题栏背景色(纯色)
		"navigationStyle":"custom"//用户自定义(添加此处!!!!!)
    }            
}

첫 번째 방법: 스타일에 그라데이션 색상 추가

<view class="top" ref="top"></view>
.top{
    
    
   width: 100%;
   height: 200px;
   background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);
   box-shadow: 24px 52px 100px 0px rgba(90, 108, 234, 
}

효과 사진:
여기에 이미지 설명 삽입
두 번째 방법: 배경 사진 사용

<view class="top" ref="top">
	<image mode="widthFix" class="top-img" src="@/static/img/bg.png"></image>
</view>
.top-img {
    
    
	display: block;
	width: 100%;
	height: 324rpx;
}

렌더링:
여기에 이미지 설명 삽입

추천

출처blog.csdn.net/maoge_666/article/details/131942286