广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
4008-888-888

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

怎么运营微信小程序_微信小程序MUI导航栏通明突

日期:2021-01-08 浏览:
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)       这篇文章主要介绍了微信小程序MUI导航栏透明渐变功能,结合实例形式分析了通过改变opacity实现透明度渐变功能相关操作技巧,需要的朋友可以参考下

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

导航栏透明渐变效果

实现原理

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

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

WXML

 !--pages/scroll/scroll.wxml-- 
 view 
 scroll-view scroll-y="false" bindscroll="scroll" 
 view 
 view /view 
 view text 首页 /text /view 
 view text 活动 /text /view 
 view text 菜单 /text /view 
 view text 我的 /text /view 
 /view 
 view 
 banner
 /view 
 view 
 goods-list1
 /view 
 view 
 goods-list2
 /view 
 view 
 goods-list3
 /view 
 view 
 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 })

总结:

1. 需要scroll-view组件配合使用才能获取scrollTop;

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

Demo源码:

点击此处。

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




新闻资讯

联系方式丨CONTACT

  • 全国热线:4008-888-888
  • 传真热线:010-88888888
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系