小程序实现顶部滚动渐变栏

最近在写一个项目发现一个效果挺好玩的，分享给大家，先上图

接下来上代码布局代码
`

<!-- 顶部栏 -->
<view style="height:{{searchHeight}}px;opacity:{{(scrollTop/100)>=1?1:(scrollTop/100)}}" class="statusLan">
    <view style="margin-top:{{top}}px;height:{{height}}px" >我的</view>
</view>

<!-- 背景 -->
<view class="mine-bg" style="background-color:{{themeColor.mainCcolor}}"></view>

<!-- 我的信息 -->
<view class="userinfo-view" style="margin-top:{{searchHeight}}px" bindtap="{{userInfo?'':'toLogin'}}">
    <view class="user-logo">
        <image src="/images/defult-logo.png" mode="aspectFill"></image>
    </view>
    <view class="user-login">
        <text>{{userInfo.memberName?userInfo.memberName:'请登录'}}</text>
        <text>开始您的eso之旅</text>
    </view>
</view>

<!-- 菜单栏 -->
<view class="items-view">
    <view wx:for="{{items}}" wx:key="index" bindtap="jump" data-url="{{item.url}}">
        <text class="iconfont {{item.icon}}" style="color:{{themeColor.mainCcolor}}"></text>
        <text style="color:{{themeColor.ruleColor}}">{{item.title}}</text>
    </view>
</view>

<!-- 功能栏 -->
<view class="funcs-view">
    <view wx:for="{{funcs}}" wx:key="index" bindtap="jump" data-url="{{item.url}}">
        <text class="iconfont {{item.icon}}" style="color:{{themeColor.mainCcolor}}"></text>
        <text style="color:{{themeColor.ruleColor}}">{{item.title}}</text>
    </view>
</view>


<view style="height:300px;width:100%;"></view>

`

js代码就是添加一个滚动监听
data: {
searchHeight:0,
bottom:0,
top:0,
height:0,
scrollTop:0,
items:[
{icon:“iconwodewenzhang”,title:‘我的发布’,url:""},
{icon:“iconshoucang”,title:‘赞和收藏’,url:""},
{icon:“iconjifen”,title:‘我的积分’,url:""},
{icon:“iconqiandao”,title:‘每日签到’,url:""}],
funcs:[
{icon:“iconicon_history”,title:‘浏览历史’,url:""},
{icon:“iconicon_theme-07”,title:‘切换主题’,url:""},
{icon:“icondingshirenwu”,title:‘每日任务’,url:""},
{icon:“iconsettinggear”,title:‘设置’,url:""},
{icon:“iconHelp”,title:‘帮助与反馈’,url:""}
]
},
/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  let _that=this;

let { top, height,bottom } = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
  success: (res) => {
      console.log(res)
      _that.setData({ searchHeight: res.statusBarHeight + height + 18, bottom: bottom,top:top,height },()=>{
      })
  }
})

},
onPageScroll(e){
this.setData({scrollTop:e.scrollTop})
},

wxss代码我是用了less，装个插件转一下就行
page{width: 100%;overflow-x: hidden;}
.container{
.mine-bg{
width: 120%;
height: 250rpx;
position: absolute;
left: -10%;
z-index: -1;
border-radius: 0 0 50% 50%;
}
.statusLan{
width: 100%;
position: fixed;
z-index: 6;
top: 0;
background-color: #fff;
view{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.userinfo-view{
width: 690rpx;
height: 200rpx;
z-index: 2;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 5rpx 14rpx #eee;
margin: 0 auto;
padding: 0 30rpx;
display: flex;
align-items: center;
.user-logo{
width: 120rpx;
height: 120rpx;
image{
width: 100%;
height: 100%;
}
}
.user-login{
height: 120rpx;
display: flex;
flex-direction: column;
justify-content:center;
margin-left: 30rpx;
text{
&:first-of-type{
font-size: 30rpx;
color: #333;
}
&:last-of-type{
margin-top: 10rpx;
font-size: 22rpx;
color: #cdcdcd;
}
}
}
}
.items-view{
width: 690rpx;
z-index: 2;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 5rpx 14rpx #eee;
margin: 30rpx auto 0;
display: flex;
flex-wrap: wrap;
padding: 30rpx 0;
view{
width: 172.5rpx;
height: 110rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text{
&:first-of-type{
font-size: 40rpx;
}
&:last-of-type{
font-size: 26rpx;
margin-top: 10rpx;
}
}
}
}
.funcs-view{
width: 690rpx;
z-index: 2;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 5rpx 14rpx #eee;
margin: 30rpx auto 0;
padding:0 0 0 30rpx;
view{
width: 100%;
height: 110rpx;
display: flex;
align-items: center;
padding-right: 30rpx;
justify-content: space-between;
position: relative;
text{
&:first-of-type{
font-size: 40rpx;
}
&:last-of-type{
font-size: 26rpx;
}
}
&::after{
position: absolute;
content: ‘’;
border-bottom:1px solid #f1f1f1;
width: 200%;
height: 200%;
top: 0;
left: 0;
transform: scale(0.5);
transform-origin: 0 0;
}
&:last-of-type{
border:none;
}
}
}
}

代码复制粘贴即可使用，希望可以帮助大家！