微信小程序语言包导航栏透明渐变功能示例（通过改变不透明实现)

本文实例讲述了微信小程序语言包导航栏透明渐变功能。分享给大家供大家参考，具体如下：

导航栏透明渐变效果

实现原理

1.利用位置：绝对在导航下定位一个视角作为背景渐变使用；

2.通过改变改视角的不透明来实现透明渐变。

WXML

！-页面/滚动/滚动。wxml-view style=' height :100%；位置：固定；宽度：100%;" scroll-view scroll-y=' false ' bind scroll=' scroll ' style=' height :100%；"view class=' page-group ' view class=' page-group-position ' style=' opa city 3360 { { scroll top/400 0.9？0.9 :滚动ToP/400 } } '/view view class=' page-nav-list '文本首页/text/view view class=' page-nav-list '文本活动/text/view view class=' page-nav-list '文本菜单/text/view view class=' page-nav-list '文本我的/text/view/view view class=' page-banner ' banner/view class=' goods-list ' goods-list 1/view class=' goods-list 2 ' goods-list 2/view class=' goods-list 3 ' goods-list 3/view class=' goods-list 4 ' goods-list 4/view/roll-view/view XSS。页面横幅{ height: 500rpx背景-颜色：绿黄色；padding: 20rpxcolor: # fff填充-top : 100 rpx；}.页面组{显示：表；宽度： 100%;固定表布局：位置：固定；top : 0；左： 0；z指数： 10；}.页面组位置{宽度： 100%；高度： 100%;绝对位置：top : 0；左： 0；背景色：蓝紫色；opa城市3360 0；z指数：-1;}.页面导航列表{ padd :30 rpx 0；显示器：表格单元格；文本对齐：中心；宽度： 100%;color: # fff}。货物清单{ height: 500rpx背景-颜色：绿色；padd : 20 rpxcolor : # fff } . list 2 { background-color : }蓝色；} .list3 {背景色：黄色；} .列表4 {背景色：红色；}JS

页面({ data: { scrollTop: null }，//滚动条监听scroll:函数{这个。setdata({滚动顶部： e . detail。向上滚动})}，})总结：

1.需要滚动视图组件配合使用才能获取scrollTop

2.scrollTop/400 0.9，这里400的距离是根据需求改变，0.9是背景最后的半透明值，可以根据页面调节。

演示源码：

点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。