微信小程序MUI導航欄透明漸變功能示例(通過改變opacity實現(xiàn))
更新時間：2019年01月24日 10:00:51 作者：Rattenking
這篇文章主要介紹了微信小程序MUI導航欄透明漸變功能,結(jié)合實例形式分析了通過改變opacity實現(xiàn)透明度漸變功能相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序MUI導航欄透明漸變功能。分享給大家供大家參考，具體如下：
導航欄透明漸變效果
實現(xiàn)原理
1. 利用position:absolute在導航下定位一個view作為背景漸變使用;
2. 通過改變改view的opacity來實現(xiàn)透明漸變。
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
},
//滾動條監(jiān)聽
scroll: function (e) {
this.setData({ scrollTop: e.detail.scrollTop })
},
})
總結(jié)：
1. 需要scroll-view組件配合使用才能獲取scrollTop;
2. scrollTop / 400 > 0.9，這里400的距離是根據(jù)需求改變，0.9是背景最后的半透明值，可以根據(jù)頁面調(diào)節(jié)。
Demo源碼：
點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
做一個彈出dialog時用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下2014-02-02
qrcode.js是一個使用比較多的js生成二維碼的插件，非常方便，接下來通過本文給大家分享使用JS 插件qrcode.js生成二維碼功能，需要的朋友參考下2017-02-02
這篇文章主要為大家詳細介紹了javascript微信支付的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JavaScript代碼模擬鼠標自動點擊事件示例，文章通過示例代碼和運行效果圖介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
JSON（JavaScript Object Notation）即JavaScript對象表示法，是一種輕量級的數(shù)據(jù)交換格式。它非常便于編程人員對數(shù)據(jù)的處理，也便于機器對數(shù)據(jù)的解析和生成，應用非常廣泛2016-02-02
跟我學Node.js（四）---Node.js的模塊載入方式與機制
Node.js中模塊可以通過文件路徑或名字獲取模塊的引用。模塊的引用會映射到一個js文件路徑，除非它是一個Node內(nèi)置模塊。Node的內(nèi)置模塊公開了一些常用的API給開發(fā)者，并且它們在Node進程開始的時候就預加載了。2014-06-06
javascript貪吃蛇 作者sunxing007 注釋完整，面向?qū)ο?2009-05-05
在頁面中加上這串代碼就行了，同時還有搜索功能。2009-10-10
微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個屬性就可以了,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
今天小編就為大家分享一篇layer iframe 設置關閉按鈕的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09