微信小程序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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
星际争霸中的热键
2020/03/04 星际争霸
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP对象相关知识总结
2017/04/09 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
学习python处理python编码问题
2011/03/13 Python
Python匹配中文的正则表达式
2016/05/11 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
对python模块中多个类的用法详解
2019/01/10 Python
python批量创建指定名称的文件夹
2019/03/21 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
篮球社团活动总结
2014/06/27 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2014年民政工作总结
2014/11/26 职场文书
预备党员群众意见
2015/06/01 职场文书
python实现会员管理系统
2022/03/18 Python