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