微信小程序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 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
vue使用openlayers实现移动点动画
Sep 24 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
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php实现分页工具类分享
2014/01/09 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
使用Python下载Bing图片(代码)
2013/11/07 Python
Python中的zipfile模块使用详解
2015/06/25 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python 操作 MySQL数据库
2020/09/18 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
Servlet面试题库
2015/07/18 面试题
JAVA软件工程师测试题
2014/07/25 面试题
精彩的推荐信范文
2013/11/26 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
祝寿主持词
2015/07/02 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL