微信小程序----导航栏透明渐变二(MUI导航栏透明渐变)
2023-09-27 14:28:57 时间
导航栏透明渐变效果
实现原理
- 给page-group设置的背景颜色采用rgba;
- 通过改变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。
其他
相关文章
- 微信小程序自动化测试pytest版工具使用方法
- 微信小程序 - 回到自己位置(map)
- 微信小程序-wxs
- .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转
- jsapi微信支付v3版
- 【小程序】微信小程序实现类似js的alert的弹窗效果(图文+代码)
- 【小程序】微信小程序中的navigator超链接和路由跳转(图文+代码)
- 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页
- 淘东电商项目(12) -搭建企业级微信公众号
- 【Python】【微信】+操作电脑版微信
- 前端微信小程序资讯类仿今日头条微信小程序
- 微信小程序组件化开发框架WePY
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的
- 微信接口调用'updateTimelineShareData','updateAppMessageShareData' 的踩坑记录
- 微信小程序~tabBar和navigator一起使用无效
- 微信聊天小程序——(二、账号的注册与登录)
- 微信小程序——聊天功能(一、环境搭建)
- 微信小程序原生开发功能合集十一:定时器组件的封装
- 微信小程序图片宽100%显示并且不变形
- 微信公众号平台开发-网页授权
- 微信原始demo
- 微信小程序开发实战(网路请求Promise化)
- 微信小程序获取----onenet的数据并控制stm32的板载LED
- 微信小程序项目入门实战(App)基础篇-Array老师-专题视频课程
- Android 中 QQ 和 微信打开第三方应用