微信小程序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 相关文章推荐
微信JS接口汇总及使用详解
Jan 09 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
leaflet的开发入门教程
Nov 17 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
JavaScript中的高级函数
Jan 04 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
微信小程序导航栏滑动定位功能示例(实现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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
二招解决php乱码问题
2012/03/25 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PDO::query讲解
2019/01/29 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
layui表格数据重载
2019/07/27 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
文员个人求职自荐信
2013/09/21 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
法院信息化建设方案
2014/05/21 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
教学反思怎么写
2016/02/24 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python