微信小程序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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
JS简易计算器实例讲解
Jun 30 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防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python编程实现使用线性回归预测数据
2017/12/07 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python装饰器练习题及答案
2019/11/01 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
深圳茁壮笔试题
2015/05/28 面试题
规范化管理年活动总结
2014/08/29 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
六年级作文之关于梦
2019/10/22 职场文书