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


Posted in Javascript onJanuary 24, 2019

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

导航栏透明渐变效果

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

实现原理

1. 给page-group设置的背景颜色采用rgba;

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

WXML

<view style="height:100%;position:fixed;width:100%;">
 <scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;">
 <!-- 改变位置,去掉多余的view,直接改变背景色的透明度实现透明渐变 -->
  <view class="page-group" style="background-color: rgba(138, 43, 226,{{scrollTop / 400 > 0.9 ? 0.9 : scrollTop / 400}});">
   <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;}
/*去掉多余的class,直接设置背景色为rgba格式*/
.page-group{
 display: table;
 width: 100%;
 table-layout: fixed;
 background-color: rgba(138, 43, 226,0);
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10;
}
.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.优点是去掉了多余的view空和class代码,减少了代码,实现了相同的效果。

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

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

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue中template的三种写法示例
Oct 21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 #Javascript
微信小程序导航栏滑动定位功能示例(实现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
You might like
php内核解析:PHP中的哈希表
2014/01/30 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue实现微信分享功能
2018/11/28 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python中的元类编程入门指引
2015/04/15 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python之文件读取一行一行的方法
2018/07/12 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
幼儿园标语大全
2014/06/19 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
地震慰问信
2015/02/14 职场文书
确保工程质量承诺书
2015/04/29 职场文书
关于倡议书的范文
2015/04/29 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python