本文實例講述了微信小程序MUI導航欄透明漸變功能。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯專業(yè)提供成都主機托管四川主機托管成都服務器托管四川服務器托管，支持按月付款！我們的承諾：貴族品質、平民價格，機房位于中國電信/網通/移動機房，綿陽服務器托管服務有保障！

導航欄透明漸變效果

實現原理

1. 利用position:absolute在導航下定位一個view作為背景漸變使用;

2. 通過改變改view的opacity來實現透明漸變。

WXML

<!--pages/scroll/scroll.wxml-->
<view >
 <scroll-view scroll-y="false" bindscroll="scroll" >
  <view class="page-group">
   <view class="page-group-position" ></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>

文章題目：微信小程序MUI導航欄透明漸變功能示例(通過改變opacity實現)-創(chuàng)新互聯
本文鏈接：http://jinyejixie.com/article16/ggcdg.html

成都網站建設公司_創(chuàng)新互聯，為您提供手機網站建設、服務器托管、定制開發(fā)、網站改版、營銷型網站建設、定制網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯