微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)


Posted in Javascript onJanuary 24, 2019

本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考,具体如下:

导航栏透明渐变效果

微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

实现原理

1. 利用position:absolute在导航下定位一个view作为背景渐变使用;

2. 通过改变改view的opacity来实现透明渐变。

WXML

<!--pages/scroll/scroll.wxml-->
<view style="height:100%;position:fixed;width:100%;">
 <scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;">
  <view class="page-group">
   <view class="page-group-position" style="opacity:{{scrollTop / 400 > 0.9 ? 0.9 : scrollTop / 400}}"></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 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;}
.page-group{
 display: table;
 width: 100%;
 table-layout: fixed;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10;
}
.page-group-position{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-color: blueviolet;
 opacity: 0;
 z-index: -1;
}
.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. 需要scroll-view组件配合使用才能获取scrollTop;

2. scrollTop / 400 > 0.9,这里400的距离是根据需求改变,0.9是背景最后的半透明值,可以根据页面调节。

Demo源码:

点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
浅谈js中对象的使用
Aug 11 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
vue.js的安装方法
May 12 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
JS实现简单省市二级联动
Nov 27 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
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 #Javascript
You might like
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php实现文件下载代码分享
2014/08/19 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
Javascript基础教程之比较操作符
2015/01/18 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python的缺点和劣势分析
2019/11/19 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
新年联欢会主持词
2014/03/27 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
培训心得体会怎么写
2016/01/25 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
MySQL学习必备条件查询数据
2022/03/25 MySQL