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

微信小程序自定義頂部導(dǎo)航組件

 更新時(shí)間：2022年07月07日 17:27:55   作者：In?Heaven  
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義頂部導(dǎo)航組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義頂部導(dǎo)航組件，供大家參考，具體內(nèi)容如下

在components中新建文件夾navbar

components/navbar.wxml

<!--components/navbar.wxml-->
<view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') ">
? <!-- 左上角 返回按鈕 和 home按鈕 wx:if="{{showNav}}" 是控制左上角按鈕的顯示隱藏，首頁不顯示 -->
? <view class="navbar_left" style="top:{{navTop}}px;height:{{jnheight-1}}px;width:{{jnwidth-3}}px" wx:if="{{showNav}}">
? ? <!-- 控制返回按鈕的顯示 -->
? ? <view class="navBack" bindtap="navBack">
? ? ? <image src="/images/back.png" mode="widthFix"></image>
? ? </view>
? ? <!-- home按鈕 wx:if="{{showHome}}" 是控制左上角 home按鈕的顯示隱藏-->
? ? <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}">
? ? ? <image src="/images/index.png" mode="widthFix" style="width:50%"></image>
? ? </view>
? </view>
? <!-- 中間標(biāo)題 -->
? <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view>
</view>

components/navbar.js

const App = getApp();
Component({
? // 組件的屬性列表
? properties: {
? ? pageName: String, //中間的title
? ? showNav: { //判斷是否顯示左上角的按鈕 ? ?
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? showHome: { //判斷是否顯示左上角的home按鈕
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? imgUrl:{//圖片背景路徑
? ? ? type: String,
? ? ? value: App.globalData.imgLink+'index.jpg',
? ? },
? },
? // 組件的初始數(shù)據(jù)
? data: {
? ? showNav: true, //判斷是否顯示左上角的home按鈕
? ? showHome: true, //判斷是否顯示左上角的按鈕

? },
? lifetimes: {
? ? // 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名
? ? attached: function() {
? ? ? this.setData({
? ? ? ? navHeight: App.globalData.navHeight, //導(dǎo)航欄高度
? ? ? ? navTop: App.globalData.navTop, //膠囊按鈕與頂部的距離
? ? ? ? jnheight: App.globalData.jnheight, //膠囊高度
? ? ? ? jnwidth: App.globalData.jnwidth //膠囊寬度
? ? ? })
? ? }
? },
? // 組件的方法列表
? methods: {
? ? //回退
? ? navBack: function() {
? ? ? wx.navigateBack()
? ? },
? ? //回主頁
? ? navHome: function() {
? ? ? wx.switchTab({
? ? ? ? url: '/pages/index/index'
? ? ? })
? ? },
? }
})

components/navbar.wxss

/* components/navbar.wxss */
.navbar {
? width: 100%;
? overflow: hidden;
? position: sticky;
? top: 0;
? left: 0;
? z-index: 10;
? flex-shrink: 0;
? background: #fff;
?
}

.navbar_left {
? display: -webkit-flex;
? display: flex;
? -webkit-box-align: center;
? -ms-flex-align: center;
? -webkit-align-items: center;
? align-items: center;
? position: absolute;
? left: 10px;
? z-index: 11;
? line-height: 1;
? border: 1rpx solid #f0f0f0;
? border-radius: 40rpx;
? overflow: hidden;
? background: rgba(255, 255, 255, 0.6);
}
.navBack image{
? width: 60%;
}
?
.navbar_left view {
? width: 50%;
? display: flex;
? align-items: center;
? justify-content: center;
}
?
.nav_line {
? border-left: 1rpx solid #f0f0f0;
}
?
.navbar_title {
? width: 100%;
? box-sizing: border-box;
? padding-left: 115px;
? padding-right: 115px;
? height: 32px;
? line-height: 32px;
? text-align: center;
? position: absolute;
? left: 0;
? z-index: 10;
? color: #333;
? font-size: 16px;
? font-weight: bold;
? text-overflow: ellipsis;
? overflow: hidden;
? white-space: nowrap;
}

在公共組件app.js中獲取導(dǎo)航高度等信息

// app.js
App({
? onLaunch() {
? ? //設(shè)置導(dǎo)航欄
? ? //獲取菜單按鈕的布局位置信息
? ? let menuButtonObject = wx.getMenuButtonBoundingClientRect();
? ? //獲取系統(tǒng)信息
? ? wx.getSystemInfo({
? ? ? success: res => {
? ? ? ? console.log('xxxx', res)
? ? ? ? //狀態(tài)欄的高度
? ? ? ? let statusBarHeight = res.statusBarHeight,
? ? ? ? ? //膠囊按鈕與頂部的距離
? ? ? ? ? navTop = menuButtonObject.top,
? ? ? ? ? navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
? ? ? ? let globalData = this.globalData;
? ? ? ? globalData.navHeight = navHeight;//導(dǎo)航欄高度
? ? ? ? globalData.navTop = navTop;//膠囊按鈕與頂部的距離
? ? ? ? globalData.jnheight = menuButtonObject.height;//膠囊的高度
? ? ? ? globalData.jnwidth = menuButtonObject.width;//膠囊的寬度
? ? ? ? globalData.screenHeight = res.screenHeight;//屏幕高度
? ? ? },
? ? ? fail(err) {
? ? ? ? console.log(err);
? ? ? }
? ? });

? },
? //設(shè)置全局對象
? globalData: {
? ? navHeight: 0,
? ? navTop: 0,
? ? jnheight: 0,
? ? jnwidth: 0,
? ? screenHeight: 0,
? }
})

在app.json中設(shè)置導(dǎo)航自定義，去除默認(rèn)的導(dǎo)航 “navigationStyle”: "custom"

?"window": {
? ? "backgroundTextStyle": "light",
? ? "navigationBarBackgroundColor": "#fff",
? ? "navigationBarTitleText": "Weixin",
? ? "navigationBarTextStyle": "black",
? ? "navigationStyle": "custom"
? },

引用到pages中的文件里

json文件中引用組件****

{
? "usingComponents":{
? ? "navbar":"/components/navbar/navbar"
? }
}

html文件中

<navbar page-name="{{navbar.shoppingName}}"></navbar>

js文件中

Page({
? data:{
? ? navbar:{
? ? ? shoppingName:'首頁',
? ? },
? }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 快速對接payjq的個(gè)人微信支付接口過程解析

    快速對接payjq的個(gè)人微信支付接口過程解析

    這篇文章主要介紹了快速對接payjq的個(gè)人微信支付接口過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-08-08
  • 深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)

    深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)

    這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù) 的相關(guān)資料,需要的朋友可以參考下
    2016-08-08
  • js簡單實(shí)現(xiàn)讓文本框內(nèi)容逐個(gè)字的顯示出來

    js簡單實(shí)現(xiàn)讓文本框內(nèi)容逐個(gè)字的顯示出來

    逐個(gè)字顯示效果就像是打印機(jī)一樣，在某些情況下起到強(qiáng)調(diào)作用，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下
    2013-10-10

    • 最新評論