微信小程序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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
查看django版本的方法分享
2018/05/14 Python
Python地图绘制实操详解
2019/03/04 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
通信工程毕业生自荐信
2013/11/01 职场文书
平民服装店创业计划书
2014/01/17 职场文书
政协调研汇报材料
2014/08/15 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
简历自我评价范文
2019/04/24 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
react 路由Link配置详解
2021/11/11 Javascript