微信小程序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 相关文章推荐
jsonp原理及使用
Oct 28 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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中如何判断AJAX提交的数据
2012/02/05 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php实现的递归提成方案实例
2015/11/14 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
javascript制作2048游戏
2015/03/30 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python小进度条显示代码
2019/03/05 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python实现一个猜拳游戏
2020/04/05 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
python利用opencv实现颜色检测
2021/02/23 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
个人实习生的自我评价
2014/02/16 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
给领导的感谢信范文
2015/01/23 职场文书
孔子观后感
2015/06/08 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android