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


Posted in Javascript onJanuary 24, 2019

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

导航栏透明渐变效果

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

实现原理

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;}

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

点击此处本站下载

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

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 #Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 #Javascript
记一次vue去除#问题处理经过小结
Jan 24 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 #Javascript
vue车牌号校验和银行校验实战
Jan 23 #Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 #Javascript
You might like
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
公司道歉信范文
2014/01/09 职场文书
关于运动会的稿件
2014/02/02 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2015年统战工作总结
2015/05/19 职场文书
食品卫生管理制度
2015/08/06 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Java后台生成图片的完整步骤
2021/08/04 Java/Android