深入解析：小程序setNavigationBarColor设置背景渐变,图片渐变

小程序setNavigationBarColor设置背景渐变

第一种：渐变图片

<view class="Box" :style="'height:'+s_topImg+'rpx'" >
  <!-- 设置背景图片及自适应高度 -->
      <view class="contain-box" :style="[{backgroundImage:'url('+backgroundImg+')'}, 'height:'+s_topImg+'rpx']" >
      <!-- 滚动动态设置样式 -->
          <view :class="scrollTopShow?'top-item1':'top-item2'":style="'background:rgba(48, 154, 236,' +topOpacity+')'">
          <!-- 胶囊以上占位盒子 -->
          <view :style="'height:'+s_top+'rpx', 'line-height:'+s_top+'rpx'"></view>
            <!-- 动态设置高和行高与胶囊保持一致 -->
                <view class="title-type" :style="['height:'+s_height+'rpx','line-height:'+s_height+'rpx']">
                项目订阅管理
              </view>
            </view>
          </view>
        </view>
        <script>
          export default {
          data() {
          return {
          backgroundImg: '/subscribe/static/img/topbg1.jpg', // 顶部背景图
          s_top: '100', //胶囊距离顶部距离
          s_height: '100', //胶囊行高 
          s_topImg: '80',
          scrollTopShow: true, // 顶部颜色默认隐藏
          topOpacity: 0,
          }
          },
          created() {
          this.initTopImg();
          },
          // 监听滚动事件
          onPageScroll(e) {
          //nvue暂不支持滚动监听，可用bindingx代替
          let scrollTop = e.scrollTop;
          this.topOpacity = scrollTop / 300 >
          0.9 ? 1 : scrollTop / 300
          if (e.scrollTop != 0) {
          this.scrollTopShow = false;
          } else {
          this.scrollTopShow = true;
          }
          },
          methods: {
          // 初始化顶部背景图
          initTopImg() {
          let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
          this.s_top = menuButtonInfo.top * 2;
          this.s_topImg = menuButtonInfo.top * 2+100 ;
          //+ 508
          this.s_height = menuButtonInfo.height * 2;
          },
          }
          }
        </script>
          <style lang="scss">
          page {
          background-color: #f8f9fa;
          }
          .Box{
          position: sticky;
          top: 0;
          z-index: 100;
          }
          .contain-box {
          width: 100%;
          background-size: 100% 100%;
          align-items: center;
          .top-item1 {
          .title-type {
          font-size: 36rpx;
          font-weight: 400;
          color: #fff;
          display: flex;
          justify-content: center;
          /* 水平居中 */
          }
          }
          .top-item2 {
          position: fixed;
          top: 0;
          width: 100%;
          .title-type {
          font-size: 36rpx;
          font-weight: 400;
          color: #fff;
          display: flex;
          justify-content: center;
          /* 水平居中 */
          }
          }
          }
          .top{
          width: 100%;
          height: 200px;
          background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);
          box-shadow: 24px 52px 100px 0px rgba(90, 108, 234, 10%)
          }
          .setting{
          .header {
          background: linear-gradient(135deg, #007aff 0%, #0056d6 100%);
          color: white;
          padding: 20px 16px;
          text-align: center;
          // position: sticky;
          // top: 0;
          z-index: 100;
          box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);
          }
          .header h1 {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 4px;
          }
          .header p {
          font-size: 0.875rem;
          opacity: 0.9;
          }
          .main {
          padding: 16px;
          padding-bottom: 100px;
          }
          .list {
          background: white;
          border-radius: 12px;
          margin-bottom: 16px;
          padding: 16px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
          transition: all 0.3s ease;
          }
          .list:active {
          transform: scale(0.99);
          }
          .first {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          }
          .title {
          font-size: 1.125rem;
          font-weight: 600;
          color: #2c3e50;
          }
          .subtitle {
          font-size: 0.75rem;
          padding: 4px 10px;
          border-radius: 10px;
          font-weight: 500;
          }
          /* 分类标识颜色 - 使用主题色变体 */
          .color1 {
          background-color: rgba(0, 122, 255, 0.1);
          color: #007aff;
          }
          .color2 {
          background-color: rgba(0, 122, 255, 0.15);
          color: #0062cc;
          }
          .color3 {
          background-color: rgba(0, 122, 255, 0.2);
          color: #0052b3;
          }
          .content {
          margin: 12px 0;
          padding: 12px;
          background: #f9f9f9;
          border-radius: 8px;
          }
          .second {
          display: flex;
          flex-direction: column;
          }
          .secondTip {
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 8px;
          font-size: 0.875rem;
          }
          .secondList {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          }
          }
        </style>

2. 渐变颜色

<view class=“Box” :style=“‘height:’+s_topImg+‘rpx’” @touchmove.prevent>





<uni-icons type=“left” size=“25” @click=“goBack” class=“iconback”>
任务订阅管理