微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變opacity實(shí)現(xiàn))
更新時(shí)間：2019年01月24日 10:00:51 作者：Rattenking
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過改變opacity實(shí)現(xiàn)透明度漸變功能相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序MUI導(dǎo)航欄透明漸變功能。分享給大家供大家參考，具體如下：
導(dǎo)航欄透明漸變效果
實(shí)現(xiàn)原理
1. 利用position:absolute在導(dǎo)航下定位一個(gè)view作為背景漸變使用;
2. 通過改變改view的opacity來實(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)聽
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ì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
JavaScript高級(jí)程序設(shè)計(jì) DOM學(xué)習(xí)筆記
DOM是針對(duì)XML和HTML文檔的一個(gè)API：即規(guī)定了實(shí)現(xiàn)文本節(jié)點(diǎn)操控的屬性、方法，具體實(shí)現(xiàn)由各自瀏覽器實(shí)現(xiàn)。2011-09-09
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系2007-12-12
這篇文章主要介紹了原生JS實(shí)現(xiàn)的輪播圖功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)輪播圖的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08
利用JavaScript在網(wǎng)頁(yè)實(shí)現(xiàn)八數(shù)碼啟發(fā)式A*算法動(dòng)畫效果
這篇文章主要介紹了利用JavaScript在網(wǎng)頁(yè)實(shí)現(xiàn)八數(shù)碼啟發(fā)式A*算法動(dòng)畫效果,需要的朋友可以參考下2017-04-04
CocosCreator入門教程之用TS制作第一個(gè)游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個(gè)游戲，對(duì)TypeScript感興趣的同學(xué)，一定要看一下2021-04-04
JS中對(duì)數(shù)組元素進(jìn)行增刪改移的方法總結(jié)
本文主要JS中對(duì)數(shù)組元素進(jìn)行增刪改移的方法，用表格的形式進(jìn)行整理，方便閱讀，具有很好的參考價(jià)值，下面就跟小編一起來看下吧2016-12-12
Javascript表單驗(yàn)證要注意的事項(xiàng)
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有：用戶是否已填寫表單中的必填項(xiàng)目？用戶輸入的郵件地址是否合法？用戶是否已輸入合法的日期？用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本？2014-09-09
Javascript圖像處理—閾值函數(shù)實(shí)例應(yīng)用
閾值是最簡(jiǎn)單的圖像分割方法,接下來將介紹五種閾值類型感興趣的朋友可以參考下2013-01-01
JavaScript驗(yàn)證圖片類型(擴(kuò)展名)的函數(shù)分享
這篇文章主要介紹了JavaScript驗(yàn)證圖片類型的函數(shù)分享,需要的朋友可以參考下2014-05-05
原生js jquery ajax請(qǐng)求以及jsonp的調(diào)用方法
下面小編就為大家?guī)硪黄鷍s jquery ajax請(qǐng)求以及jsonp的調(diào)用方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08