微信小程序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中detach()方法用法实例
Dec 25 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
js实现全选和全不选功能
Jul 28 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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
Zerg兵种介绍
2020/03/14 星际争霸
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jquery 防止表单重复提交代码
2010/01/21 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JS常见算法详解
2017/02/28 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
从vue源码看props的用法
2019/01/09 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
分享Python字符串关键点
2015/12/13 Python
深入理解python try异常处理机制
2016/06/01 Python
Python正则简单实例分析
2017/03/21 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
"引用"与多态的关系
2013/02/01 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
优秀班组事迹材料
2014/12/24 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server