微信小程序 透明渐变色封面的实现

真机效果(vivo nex)

index.wxml

<!--pages/Home/index.wxml-->
<!-- 全屏背景色统一 -->
<view style="background-color:{{apk.background}};">
  <!-- 封面 -->
  <view class="cover" wx:if="{{apk.cover}}">
    <image src="{{apk.cover}}"></image>
    <!-- 如需渐变色透明化，必须使用 rgb，部分机型下#FFFFFF00无法生效 -->
    <view class="layer" style="background:linear-gradient(rgb(255, 255, 255,0), {{apk.background}});"></view>
  </view>
  <!-- 详情字体 -->
  <view class="titleLine">
    <text style="color:{{apk.fontColor}};border-bottom: 2rpx {{apk.fontColor}} solid;">详情</text>
  </view>
  <!-- 内容 -->
  <view class="body">
    <!-- 多图标题-->
    <view wx:if="{{apk.photos && apk.photos.length>0}}" class="photosTitle">左右滑动查看图片</view>
    <!-- 图片左右滚动 -->
    <scroll-view wx:if="{{apk.photos && apk.photos.length>0}}" scroll-x='true' class="photos">
      <image class="item" wx:for="{{apk.photos}}" wx:for-index="index" wx:key="key" wx:for-item="item" src="{{item}}"></image>
    </scroll-view>
    <!-- 介绍 -->
    <view class="article" style="color:{{apk.articleColor}};">
      {{apk.article||'暂无介绍'}}
    </view>
  </view>
</view>

index.wxss

/* pages/Home/index.wxss */

/*隐藏滚动条*/

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 封面 */

.cover {
  /* 系统约定了封面的像素比例是 1:1.65 */
  width: 100vw;
  height: 165vw;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cover image {
  width: 100%;
  height: 100%;
}

.cover  .layer {
  width: 100%;
  height: 120vw;
  margin-top: -120vw;
  z-index: 999;
  /* opacity: 0.5; */
}

/* 详情字体 */

.titleLine {
  width: 100vw;
  position: relative;
  display: flex;
  margin-top: -50rpx;
}

.titleLine text {
  margin-left: 2vw;
  height: 38rpx;
  line-height: 38rpx;
  font-size: 38rpx;
  padding-bottom: 10rpx;
  z-index: 9999;
}

/*除封面外，页面内容左右填充统一*/

.body {
  width: 96vw;
  margin: 0 2vw;
}

/* 图片轮播 */

.body .photosTitle {
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: right;
}

.body .photos {
  width: 100%;
  height: calc(59vw + 20rpx);
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
  white-space: nowrap;
  padding: 0 -10rpx;
}

.body .photos .item {
  width: 36vw;
  height: 59vw;
  margin-right: 10rpx;
  border-radius: 10rpx;
}

/* 介绍 */

.body .article {
  width: 100%;
  padding-bottom: 50rpx;
}

index.js

// pages/Home/index.js
var app = getApp();
Page({
  data: {
    apk: {
      background: "#816557",
      fontColor: "#C48D90",
      articleColor: "#ffffff",
      cover: "/images/bg.jpg",
      photos: [
        "/images/photo1.jpg",
        "/images/photo2.jpg",
        "/images/photo3.jpg",
        "/images/photo4.jpg",
      ],
      article: "这是一款XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX的应用。欢迎下载，欢迎使用，欢迎打赏，欢迎合作。"
    }
  },
  onLoad: function(options) {
    var that = this
    var apk = that.data.apk
    // 需要防止因配置不完整导致的异常
    if (!apk.background) {
      apk.background = "#ffffff";
    }
    if (!that.data.apk.fontColor) {
      apk.fontColor = "#000000"
    }
    if (!that.data.apk.articleColor) {
      apk.articleColor = "#000000"
    }
    console.log("apk", apk)
    that.setData({
      apk: apk
    })
  },
})

注意：

如果需要做透明渐变色，在 wxml中必须使用rgb表示颜色，如果使用16进制表示颜色在真机下无法显示。