微信小程序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 弹出层插件实现代码
Oct 24 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
详解js异步文件加载器
2016/01/24 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
javascript 回调函数详解
2014/11/11 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
实现vuex原理的示例
2020/10/21 Javascript
python实现员工管理系统
2018/01/11 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python中自带的三个装饰器的实现
2019/11/08 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
求职简历自荐信范文
2013/10/21 职场文书
班队活动设计方案
2014/01/30 职场文书
学历公证委托书
2014/04/09 职场文书
论文指导教师评语
2014/04/28 职场文书
2014年共青团工作总结
2014/12/10 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书