Navigation bar transparent gradient effect

Implementation principle

WXML

<view style="height:100%;position:fixed;width:100%;">
  <scroll-view scroll-y="false"  bindscroll="scroll" style="height:100%;">
  <!-- Change position, remove redundant view，Directly change the transparency of background color to achieve transparent gradient -->
    <view class="page-group" style="background-color: rgba(138, 43, 226,{{scrollTop / 400 > 0.9 ? 0.9 : scrollTop / 400}});">
      <view class="page-nav-list"><text>home page</text></view>
      <view class="page-nav-list"><text>activity</text></view>
      <view class="page-nav-list"><text>menu</text></view>
      <view class="page-nav-list"><text>My</text></view>
    </view>
    <view class="page-banner">
      banner
    </view>
    <view class="goods-list">
      goods-list1
    </view>
    <view class="goods-list list2">
      goods-list2
    </view>
    <view class="goods-list list3">
      goods-list3
    </view>
    <view class="goods-list list4">
      goods-list4
    </view>
  </scroll-view>
</view>

WXSS

.page-banner{height: 500rpx;background-color: greenyellow;padding: 20rpx;color:#fff;padding-top: 100rpx;}
/*Remove redundant class es and set the background color to rgba format directly*/
.page-group{
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: rgba(138, 43, 226,0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.page-nav-list{
  padding:30rpx 0 ;
  display: table-cell;
  text-align: center;
  width: 100%;
  color: #fff;
}
.goods-list{
  height: 500rpx;
  background-color: green;
  padding: 20rpx;
  color:#fff;
}
.list2{background-color: blue;}
.list3{background-color: yellow;}
.list4{background-color: red;}

JS

Page({
  data: {
    scrollTop: null
  },
  //Scroll bar monitor
  scroll: function (e) {
    this.setData({ scrollTop: e.detail.scrollTop })
  },
})

Summary:
1. The advantage is that the redundant view empty and class codes are removed, the code is reduced, and the same effect is achieved.
2. The disadvantage is that in wechat developer tools, saving and refreshing can't get the current location scrollTop, only scrolling can get scrollTop.

DEMO download