微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變opacity實現(xiàn))-創(chuàng)新互聯(lián)

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

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

導(dǎo)航欄透明漸變效果

實現(xiàn)原理

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

2. 通過改變改view的opacity來實現(xiàn)透明漸變。

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導(dǎo)航欄透明漸變功能示例(通過改變opacity實現(xiàn))-創(chuàng)新互聯(lián)
本文鏈接：http://bm7419.com/article16/ggcdg.html

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

廣告

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