微信小程序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控制input输入时间格式的方法
Jan 28 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
js常用正则表达式集锦
May 17 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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中使用curl伪造IP的简单方法
2015/08/07 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
详解react组件通讯方式(多种)
2020/05/06 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
Python与Redis的连接教程
2015/04/22 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python计算一个序列的平均值的方法
2015/07/11 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
详解python基础之while循环及if判断
2017/08/24 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python地图绘制实操详解
2019/03/04 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
pytorch SENet实现案例
2020/06/24 Python
python类共享变量操作
2020/09/03 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
Java程序员面试90题
2013/10/19 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
群众路线教育实践活动调研报告
2014/11/03 职场文书
Python制作动态字符画的源码
2021/08/04 Python
python基础之类方法和静态方法
2021/10/24 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript