微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
作者:Rattenking 时间:2024-05-11 09:42:52
本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考,具体如下:
导航栏透明渐变效果
实现原理
1. 给page-group设置的背景颜色采用rgba;
2. 通过改变rgba其中a的值来实现透明渐变。
WXML
<view style="height:100%;position:fixed;width:100%;">
<scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;">
<!-- 改变位置,去掉多余的view,直接改变背景色的透明度实现透明渐变 -->
<view class="page-group" style="background-color: rgba(138, 43, 226,{{scrollTop / 400 > 0.9 ? 0.9 : scrollTop / 400}});">
<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;}
/*去掉多余的class,直接设置背景色为rgba格式*/
.page-group{
display: table;
width: 100%;
table-layout: fixed;
background-color: rgba(138, 43, 226,0);
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.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.优点是去掉了多余的view空和class代码,减少了代码,实现了相同的效果。
2.缺点就是在微信开发者工具中,保存刷新不能获取当前位置scrollTop,只有滚动才能获取scrollTop。
希望本文所述对大家微信小程序开发有所帮助。
来源:https://blog.csdn.net/m0_38082783/article/details/78854603
标签:微信小程序,MUI,导航栏
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php生成缩略图填充白边(等比缩略图方案)
2024-06-05 09:50:16
![](https://img.aspxhome.com/file/2023/5/122425_0s.jpg)
python3+selenium4实现切换窗口与iframe的方法
2022-08-08 16:34:16
![](https://img.aspxhome.com/file/2023/1/120431_0s.png)
设计手机端应用时的一些建议
2011-05-14 16:45:00
pytorch下的unsqueeze和squeeze的用法说明
2023-07-16 14:01:41
![](https://img.aspxhome.com/file/2023/6/63576_0s.jpg)
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2022-03-02 10:43:08
![](https://img.aspxhome.com/file/2023/9/112609_0s.png)
基于keras中import keras.backend as K的含义说明
2023-04-28 08:43:27
对用户进行电话访谈的一点感想
2009-12-28 13:05:00
![](https://img.aspxhome.com/file/UploadPic/20101/11/2009-11-25_01-10s.png)
Python实现求解最大公约数的五种方法总结
2023-07-02 20:34:46
交互设计模式——分页
2009-07-30 13:00:00
![](https://img.aspxhome.com/file/UploadPic/20097/30/01-47s.jpg)
python实现定时提取实时日志程序
2023-03-03 22:31:24
PHP判断是否微信访问的方法示例
2023-07-05 03:21:36
拖拽翻页(ThrowPage)详解 cool
2009-12-02 09:54:00
![](https://img.aspxhome.com/file/UploadPic/200912/2/01-46s.jpg)
利用Python开发实现简单的记事本
2023-07-02 13:27:27
![](https://img.aspxhome.com/file/2023/4/59654_0s.png)
ionic实现带字的toggle滑动组件
2024-04-16 09:25:45
![](https://img.aspxhome.com/file/2023/4/136684_0s.png)
Python生成器定义与简单用法实例分析
2021-03-12 21:45:59
Go处理json数据方法详解(Marshal,UnMarshal)
2024-02-06 11:47:24
Python中DJANGO简单测试实例
2022-09-09 16:36:53
网页设计的色彩思考
2007-10-19 13:30:00
jupyter notebook实现显示行号
2022-11-20 03:51:40
![](https://img.aspxhome.com/file/2023/6/103616_0s.jpg)
python django model联合主键的例子
2023-10-09 19:18:17