微信小程序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 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
js获取class的所有元素
Mar 28 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python实现数独算法实例
2015/06/09 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Linux下python制作名片示例
2018/07/20 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
少先队入队活动方案
2014/02/08 职场文书
一夜的工作教学反思
2014/02/08 职场文书
化学教学随笔感言
2014/02/19 职场文书
高校教师岗位职责
2014/03/18 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript