Wechat applet -- transparent gradient 2 of navigation bar

Navigation bar transparent gradient effect

Implementation principle

  1. The background color set for page group is rgba;
  2. The transparent gradient is realized by changing the value of a in rgba.

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

Posted by imcomguy on Tue, 05 May 2020 05:48:58 -0700