欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序自定義導(dǎo)航欄功能的實現(xiàn)

 更新時間：2025年01月26日 09:38:29   作者：愚公搬代碼  
本文介紹了微信小程序自定義導(dǎo)航欄功能的實現(xiàn)方法,首先,需要去掉原生導(dǎo)航欄,可以通過在page.json中去掉navigationBarTitleText并加上"navigationStyle":"custom"來實現(xiàn),然后,可以使用組件封裝來實現(xiàn)自定義導(dǎo)航欄的功能,感興趣的朋友一起看看吧

前言

導(dǎo)航欄是指位于頁面頂部或者側(cè)邊區(qū)域的，在頁眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個頁面的作用。

小程序原生導(dǎo)航欄的限制

  • 除了膠囊按鈕以外，原生導(dǎo)航欄只會出現(xiàn)返回按鈕和當(dāng)用戶打開的小程序最底層頁面是非首頁時，默認(rèn)展示的“返回首頁”按鈕 。
  • 原生導(dǎo)航欄的標(biāo)題文字的顏色只有黑白。
  • 布局無法改變，不能做定制。

在做自定義導(dǎo)航欄欄之前得去掉原生導(dǎo)航欄，去掉方法如下：

  • 將需要自定義navigationBar頁面的page.json的navigationBarTitleText去掉。
  • 加上"navigationStyle"：“custom”，這樣原生的導(dǎo)航欄就已經(jīng)消失，甚至后退鍵也不會出現(xiàn)需要自定義。

一、自定義導(dǎo)航欄功能的實現(xiàn)

1.組件的封裝

"use strict";
var app = getApp();
Component({
  options: {
    // 多插槽支持
    multipleSlots: true
    // ,addGlobalClass: true
  },
properties: {
  'ext-class': {
    type: String,
    value: ''
  },
    loading: {
      type: Boolean,
      value: false
    },
    active: {
      type: Boolean,
      value: false
      // ,observer: '_showChange'
    }  
  },
  data: {},
attached: function attached() {
  // 組件被加載時，計算ios、android兩個平臺的尺寸差異
  var _this = this;        
  //動態(tài)計算導(dǎo)航欄尺寸
  var isSupport = !!wx.getMenuButtonBoundingClientRect;
  var rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
  wx.getSystemInfo({
      success: function success(res) {
        var ios = !!(res.system.toLowerCase().search('ios') + 1);
        var statusBarHeight=res.statusBarHeight;
        var topBarHeight=ios ? (44 + statusBarHeight) : (48 + statusBarHeight);
        _this.setData({
            ios: ios,
            topBarHeight:topBarHeight,
            statusBarHeight:statusBarHeight,
            innerWidth: isSupport ? 'width:' + rect.left + 'px' : '',
            innerPaddingRight: isSupport ? 'padding-right:' + (res.windowWidth - rect.left) + 'px' : '',
            leftWidth: isSupport ? 'width:' + (res.windowWidth - rect.left) + 'px' : ''
        }); 
        // 這是為了在外面注入wxss變量，這個設(shè)計并不太好
        // _this.triggerEvent('getBarInfo', {topBarHeight,statusBarHeight});               
      }
  });
    //back箭頭處理的顯示
    var pages=getCurrentPages()      
    if(pages.length>1){
      this.setData({showBack:true})
    }
  },
  methods: {
    // _showChange: function _showChange(active) {           
    //   var displayStyle = 'opacity: ' + (active ? '1' : '0') + ';-webkit-transition:opacity 0.5s;transition:opacity 0.5s;';           
    //   this.setData({
    //       displayStyle: displayStyle
    //   });
    // },
    //雙擊返回頂部
    doubleClick(e) {
      if (this.timeStamp && (e.timeStamp - this.timeStamp < 300)) {
        this.timeStamp = 0
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 300
        })
      } else {
        this.timeStamp = e.timeStamp
      }
    }
  }
});
{
  "styleIsolation": "apply-shared",
  "component": true,
  "usingComponents": {}
}
<view class="weui-navigation-bar {{ext-class}}" bindtouchstart="doubleClick">
	<!-- 標(biāo)題欄 -->
<view class="{{active ? 'navigator-active' : 'navigator-normal'}} weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px;{{innerPaddingRight}};{{innerWidth}};">
		<view class='weui-navigation-bar__left' style="{{leftWidth}}">
			<slot name="left"></slot>
		</view>
		<view class='weui-navigation-bar__center'>
			<view wx:if="{{loading}}" class="weui-navigation-bar__loading"></view>
      <block wx:if="{{active}}">
			  <slot name="center"></slot>
      </block>
		</view>
	</view>
</view>
/* 微信小程序wxss中使用var變量 */
page {
  --height: 44px;
  --right: 190rpx;
}
.weui-navigation-bar {
  overflow: hidden
}
/* 
ios、android兩個平臺導(dǎo)航欄的高度不一樣
ios 44px
android 48px
 */
.weui-navigation-bar .android {
  --height: 48px;
  --right: 222rpx
}
.weui-navigation-bar__placeholder {
  height: var(--height);
  background: #F8F8F8;
  position: relative;
  z-index: 50
}
.weui-navigation-bar__inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  height: var(--height);
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: calc(100% - var(--right))
}
.weui-navigation-bar__inner.navigation-bar-border {
  /* border-bottom: 2rpx solid #ddd; */
}
.weui-navigation-bar__inner .weui-navigation-bar__left {
  position: relative;
  width: var(--right);
  padding-left: 15px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-pack: center;
}
.weui-navigation-bar__inner .weui-navigation-bar__left .btn-back {
  width: 12px;
  height: 24px;
}
.weui-navigation-bar__inner .weui-navigation-bar__left .btn-back image {
  width: 100%;
  height: 100%;
}
.weui-navigation-bar__left .btn-home {
  width: 20px;
  height: 20px;
}
.weui-navigation-bar__left .btn-back+.btn-home {
  margin-left: 50rpx;
}
.weui-navigation-bar__left .btn-home image {
  width: 100%;
  height: 100%;
}
.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback:active {
  opacity: .5
}
.weui-navigation-bar__inner .weui-navigation-bar__center {
  font-size: 17px;
  text-align: center;
  position: relative;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
}
.weui-navigation-bar__center text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: -2px;
}
.weui-navigation-bar__inner .weui-navigation-bar__loading {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  content: " ";
  animation: loading-animate 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
  background-size: 100%;
}
@keyframes loading-animate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
/* 激活顯示的狀態(tài), 非透明，有背景色 */
.navigator-active {
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  background: #FFF;
  color: #3c3c3c;
}
.navigator-normal {
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  background: transparent;
  color: white;
}

2.使用

<navigation-bar 
  ext-class="page-navigator-bar"
  active="{{active}}"
  loading="{{loading}}">
    <view class="left" slot="left">
      <icon bindtap="goBack" class="iconfont icon-back"></icon>
      <icon bindtap="goHome" class="iconfont icon-home"></icon>
    </view>
    <view slot="center">
      <view>自定義導(dǎo)航標(biāo)題</view>
    </view>
</navigation-bar>
Page({
  data: {
    loading: false,
    active: true
  },
  //點(diǎn)擊back事件處理
  goBack: function () {
    wx.navigateBack();
    this.triggerEvent('back');
  },
  //返回首頁
  goHome:function(){
    wx.reLaunch({
      url: '/pages/index/index'
    })
  },
})
@font-face {
  font-family: 'iconfont';  /* project id 1716930 */
  src: url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.eot');
  src: url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.woff') format('woff'),
  url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.svg#iconfont') format('svg');
}
.iconfont{
  font-family: 'iconfont';
}
.icon-back::after{
  content: '\e604';
  font-size: 22px;
}
.icon-home::after{
  content: '\e6f3';
  font-size: 22px;
}
.left icon:last-child{
  padding-left: 20rpx;
}
.page-navigator-bar .navigator-normal .icon-back{
  color: white;
}
.page-navigator-bar .navigator-normal .icon-home{
  color: white;
}
.page-navigator-bar .navigator-active .icon-back{
  color: black;
}
.page-navigator-bar .navigator-active .icon-home{
  color: black;
}

到此這篇關(guān)于微信小程序自定義導(dǎo)航欄功能的實現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序自定義導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 全面了解JavaScript的作用域鏈

    全面了解JavaScript的作用域鏈

    這是一個非常重要的知識點(diǎn)了，了解了JavaScript的作用域鏈的話，能幫助我們理解很多‘異常’問題。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Javascript閉包（Closure）詳解

    Javascript閉包（Closure）詳解

    閉包（closure）是Javascript語言的一個難點(diǎn)，也是它的特色，很多高級應(yīng)用都要依靠閉包實現(xiàn)。
    2015-05-05
  • 二行代碼解決全部網(wǎng)頁木馬

    二行代碼解決全部網(wǎng)頁木馬

    還是掛馬問題，這段時間，我漸漸感到壓力，頭大，通過QQ或MSN加我的人越來越多，我最近自己的工作本來就忙得不亦樂乎。哎，想想，還是要抽空來來幫幫大家。
    2008-03-03
  • 基于bootstrap的文件上傳控件bootstrap fileinput

    基于bootstrap的文件上傳控件bootstrap fileinput

    這篇文章主要為大家詳細(xì)介紹了基于bootstrap的文件上傳控件bootstrap fileinput，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • 如何利用Javascript生成平滑曲線詳解

    如何利用Javascript生成平滑曲線詳解

    相信大家都遇到過,在各種圖表框架中經(jīng)常會有將一段折線平滑的需求,不僅能給用戶帶來一種柔和的感覺,還能美化界面,讓折線看起來沒那么生硬,這篇文章主要給大家介紹了關(guān)于如何利用Javascript生成平滑曲線的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • JavaScript自定義Webpack配置實現(xiàn)流程介紹

    JavaScript自定義Webpack配置實現(xiàn)流程介紹

    本系列主要整理前端面試中需要掌握的知識點(diǎn)。本節(jié)介紹webpack如何優(yōu)化前端性能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-10-10
  • js,jQuery 排序的實現(xiàn)代碼,網(wǎng)頁標(biāo)簽排序的實現(xiàn),標(biāo)簽排序

    js,jQuery 排序的實現(xiàn)代碼,網(wǎng)頁標(biāo)簽排序的實現(xiàn),標(biāo)簽排序

    js,jQuery 排序的實現(xiàn),網(wǎng)頁標(biāo)簽排序的實現(xiàn),標(biāo)簽排序，需要的朋友可以參考下。
    2011-04-04
  • javascript支持firefox,ie7頁面布局拖拽效果代碼

    javascript支持firefox,ie7頁面布局拖拽效果代碼

    javascript 拖拽 頁面拖拽 拖拽效果的頁面 超級拖拽 javascript支持firefox,ie7頁面布局拖拽效果代碼 鼠標(biāo)拖拽
    2007-12-12
  • JavaScript制作游戲搖桿方向盤

    JavaScript制作游戲搖桿方向盤

    本文主要介紹了JavaScript制作游戲搖桿方向盤,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2014-04-04
  • 如何解決hover在ie6中的兼容性問題

    如何解決hover在ie6中的兼容性問題

    本篇主要分享了如何解決hover在ie6中的兼容性問題的方法，希望會對大家學(xué)習(xí)javascript有所幫助
    2016-12-12

最新評論