微信小程序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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 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
输出控制类
2006/10/09 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
拖动一个HTML元素
2006/12/22 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
详解Angular路由之路由守卫
2018/05/10 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python数据抓取3种方法总结
2021/02/07 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书
50岁生日感言
2014/01/23 职场文书
大一新生学期自我评价
2014/04/09 职场文书
职业生涯规划书前言
2014/04/15 职场文书
品德评语大全
2014/05/05 职场文书
外出考察学习心得体会
2016/01/18 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书