微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

2024-12-21 16:34:27

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

导航栏透明渐变效果

实现原理

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

2. 通过改变改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;}

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源码：

点击此处本站下载。

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

微信小程序教程系列之设置标题栏和导航栏（7）

微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect
微信小程序实现的动态设置导航栏标题功能示例

本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的
微信小程序实现左侧滑动导航栏

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下左侧滑动导航栏如图 wxml  <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

简介看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi
微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类似这样的效果 <view class='helpCateList'>  <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu
微信小程序仿今日头条导航栏滚动解析

项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码: <div id="tab-tip" class="container"> <div id="tagnav" class="weui-navigator weui
微信小程序顶部导航栏滑动tab效果

小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导
详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML  <view style="height:100%;position:fixed;width:100%;"> <scroll-v
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu
微信小程序实现导航栏和内容上下联动功能代码

今日给大家分享一下如何实现导航栏(nav)和内容部分上下联动(相关代码模块我已单独整理放到github上面了,欢迎前来start). github地址:https://github.com/sunshime/weChatSkill 一.效果图: 二.实现过程: 主要是使用 scroll-view 实现导航栏部分,用 swiper 实现下面的内容部分,通过 swiper 的 current 属性和导航栏的 index 相互对应来实现导航栏部分切换时内容部分跟随切换:通过 swiper 的
微信小程序自定义导航栏

本文实例为大家分享了微信小程序自定义导航栏,供大家参考,具体内容如下在微信小程序中导航栏是可以直接配置的: 目前只支持二种,但是我们的需求可能需要一个其他的颜色等,那么不得不修改这个了, "window":{ "navigationStyle": "custom" }, 我就配置了这个属性,现在来看看我的界面红色箭头指向的是配置后自动生成的,我没有写任何代码,比如我在更多界面导航栏需要自定义,那么在more.js中在onLoad()方法中获取
微信小程序自定义导航栏（模板化）

前段时间写过一篇关于微信小程序自定义导航栏的自定义组件,但是对于分享页有一定的bug 这次用模板化又搞了一遍优化了下Android与IOS 显示更接近微信原生的导航栏,以及修复分享页面不显示返回首页按钮如果大家不习惯模板化的话可以针对自己的需求拿以前封装的组件化做一些修改微信小程序自定义导航栏(组件化) CustomNavBar.wxml <template name="CustomNavBar"> <block wx:if="{{ showNavB
微信小程序顶部导航栏可滑动并选中放大

这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下老规矩,先看效果图可以看到我们实现了如下功能 1,顶部导航栏 2,可以左右滑动的导航栏 3,选中条目放大原理其实很简单,我这里把我研究后的源码发给大家吧. wxml文件如下  <scroll-view scroll-x class="navbar" scroll-with-animatio
uniapp微信小程序自定义导航栏的全过程

目录前言那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结前言相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序
微信小程序自定义导航栏效果

本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下第一步添加属性 “navigationStyle”: “custom” 全局: app.json中添加属性 “navigationStyle”: “custom” "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f
微信小程序之导航滑块视图容器功能的实现代码(简单两步)

先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e

微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

相关推荐

随机推荐