微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

导航栏透明渐变效果

实现原理

利用position:absolute在导航下定位一个view作为背景渐变使用;

通过改变改view的opacity来实现透明渐变。

WXML

<!--pages/scroll/scroll.wxml-->
<view style="height:100%;position:fixed;width:100%;"><scroll-view scroll-y="false"  bindscroll="scroll" style="height:100%;"><view class="page-group"><view class="page-group-position" style="opacity:{{scrollTop / 400 > 0.9 ? 0.9 : scrollTop / 400}}"></view><view class="page-nav-list"><text>首页</text></view><view class="page-nav-list"><text>活动</text></view><view class="page-nav-list"><text>菜单</text></view><view class="page-nav-list"><text>我的</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;}
.page-group{display: table;width: 100%;table-layout: fixed;position: fixed;top: 0;left: 0;z-index: 10;
}
.page-group-position{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: blueviolet;opacity: 0;z-index: -1;
}
.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: function (e) {this.setData({ scrollTop: e.detail.scrollTop })},
})

总结：

需要scroll-view组件配合使用才能获取scrollTop;
scrollTop / 400 > 0.9，这里400的距离是根据需求改变，0.9是背景最后的半透明值，可以根据页面调节。

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）相关推荐

【微信小程序开发（二）】自定义导航栏
1 设置小程序通栏,不展示标题导航每个页面都有自己的json文件配置,如下index.json文件, 他们会覆盖掉app.json已有的配置项通栏的设置主要是 "navigationSt ...
微信小程序地图map组件 SDK 并实现导航
说明本文使用uniapp使用map组件作为示例效果预览主要实现: 地图上搜索关键字地址对地址设置标记点位置授权被拒后,重新触发授权的处理逻辑实现获取当前位置,计算目标地址与当前位置的距离 ...
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
目录第一步:登录小程序公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key 第三步:找到腾讯地图的插件第四步:添加插件与允许授权第五步:使 ...
微信小程序-【仿咸鱼】的底部导航
效果: 说明:需要隐藏小程序自带的tabBar 下载地址:https://github.com/SuRuiGit/wxapp-customTabbar 使用步骤: 第一步:找到项目中的tabbarCo ...
微信小程序使用swiper制作左右滑动tabs导航
首先我们先来看一下效果吧很简单 wxml <swiper class="tabs-nav"><swiper-ite ...
微信小程序-锚点定位+内容滑动控制导航选中
之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中,这里我们就结合起来,实现这两个功能! 思路不再多说,直接上干货! WXML <view class="navigateBox&qu ...
微信小程序中使用腾讯地图，导航到目的地
1.效果图如下:(点击地图可导航,从用户当前位置到目的地) 2. wxml文件中 (1)目标地址location  <view class='loc'>& ...
php微信地图定位导航,微信小程序实现定位及到指定位置导航的示例代码
一:实现定位及到指定位置导航所需组件及API 1:组件:map(地图组件) 2:API:wx.getLocation(Object object)(获取当前的地理位置.速度),wx.openLocat ...
微信小程序实用组件：联系人右侧拼音导航
原文: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1328&extra=page%3D8%26filter%3Dt ...
微信小程序实现定位及到指定位置导航
一:实现定位及到指定位置导航所需组件及API 1:组件:map(地图组件) 2:API:wx.getLocation(Object object)(获取当前的地理位置.速度),wx.openLocat ...

微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

导航栏透明渐变效果

实现原理

WXML

WXSS

JS

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）相关推荐

最新文章

热门文章