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

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

导航栏透明渐变效果

实现原理

1.给页面组设置的背景颜色采用颜色

2.通过改变颜色其中a的值来实现透明渐变。

WXML

视图样式='高度：100%；位置：固定；宽度：100%;" scroll-view scroll-y=' false ' bind scroll=' scroll ' style=' height :100%；"！-改变位置，去掉多余的查看，直接改变背景色的透明度实现透明渐变-view class=' page-group ' style=' background-color : rgba(138，43，226，{{scrollTop/400 0.9？0.9 :滚动顶/400 } })；" 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%;固定表布局：背景-color: rgba(138，43，226，0)；位置：固定；top : 0；左： 0；z指数： 10；}.页面导航列表{ 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.优点是去掉了多余的视角空和班级代码，减少了代码，实现了相同的效果。

2.缺点就是在微信开发者工具中，保存刷新不能获取当前位置scrollTop，只有滚动才能获取scrollTop。

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