Taro小程序自定义顶部导航栏

最新推荐文章于 2024-06-05 17:04:40 发布
置顶 最新推荐文章于 2024-06-05 17:04:40 发布
阅读量5.6k 收藏 7
点赞数 4
文章标签： reactjs 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44143279/article/details/111159809
版权

微信自带的顶部导航栏是无法支持自定义icon和增加元素的，在开发小程序的时候自带的根本满足不了需求，分享一个封装好的组件，支持自定义icon、扩展dom，适配安卓、ios、h5，全面屏。
我用的是京东的Taro多端编译框架写的小程序，原生的也可以适用，用到的微信/taro的api做调整就行，实现效果如下。
在这里插入图片描述
在这里插入图片描述

1、NavBar.js

import Taro from '@tarojs/taro';
import React, { Component } from 'react'
import { View } from '@tarojs/components';
import { isFunction } from '../../utils/index' //判断是否为函数，可以用loadsh的_isFunction,也可以自己封装。
import './NavBar.less';


function getSystemInfo () {
  if (Taro.globalSystemInfo && !Taro.globalSystemInfo.ios) {
    return Taro.globalSystemInfo;
  } else {
    // h5环境下忽略navbar
    if (!isFunction(Taro.getSystemInfoSync)) {
      return null;
    }
    let systemInfo = Taro.getSystemInfoSync() || {
      model: '',
      system: ''
    };
    let ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);
    let rect;
    try {
      rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;
      if (rect === null) {
        throw 'getMenuButtonBoundingClientRect error';
      }
      //取值为0的情况  有可能width不为0 top为0的情况
      if (!rect.width || !rect.top || !rect.left || !rect.height) {
        throw 'getMenuButtonBoundingClientRect error';
      }
    } catch (error) {
      let gap; //胶囊按钮上下间距 使导航内容居中
      let width = 96; //胶囊的宽度
      if (systemInfo.platform === 'android') {
        gap = 8;
        width = 96;
      } else if (systemInfo.platform === 'devtools') {
        if (ios) {
          gap = 5.5; //开发工具中ios手机
        } else {
          gap = 7.5; //开发工具中android和其他手机
        }
      } else {
        gap = 4;
        width = 88;
      }
      if (!systemInfo.statusBarHeight) {
        //开启wifi的情况下修复statusBarHeight值获取不到
        systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
      }
      rect = {
        //获取不到胶囊信息就自定义重置一个
        bottom: systemInfo.statusBarHeight + gap + 32,
        height: 32,
        left: systemInfo.windowWidth - width - 10,
        right: systemInfo.windowWidth - 10,
        top: systemInfo.statusBarHeight + gap,
        width: width
      };
      console.log('error', error);
      console.log('rect', rect);
    }

    let navBarHeight = '';
    if (!systemInfo.statusBarHeight) {
      //开启wifi和打电话下
      systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
      navBarHeight = (function () {
        let gap = rect.top - systemInfo.statusBarHeight;
        return 2 * gap + rect.height;
      })();

      systemInfo.statusBarHeight = 0;
      systemInfo.navBarExtendHeight = 0; //下方扩展4像素高度 防止下方边距太小
    } else {
      navBarHeight = (function () {
        let gap = rect.top - systemInfo.statusBarHeight;
        return systemInfo.statusBarHeight + 2 * gap + rect.height;
      })();
      if (ios) {
        systemInfo.navBarExtendHeight = 4; //下方扩展4像素高度 防止下方边距太小
      } else {
        systemInfo.navBarExtendHeight = 0;
      }
    }

    systemInfo.navBarHeight = navBarHeight; //导航栏高度不包括statusBarHeight
    systemInfo.capsulePosition = rect; //右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
    systemInfo.ios = ios; //是否ios
    Taro.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了
    //console.log('systemInfo', systemInfo);
    return systemInfo;
  }
}
let globalSystemInfo = getSystemInfo();
class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      configStyle: this.setStyle(globalSystemInfo)
    };
  }
  static options = {
    multipleSlots: true,
    addGlobalClass: true
  };

  UNSAFE_componentWillMount () {
    //获取高度
    // let query = Taro.createSelectorQuery().in(this.$scope)
    // query.select('.lxy-nav-bar').boundingClientRect(rect=>{
    //   const navHeight = rect.height
    //   this.props.personalHomeMod.changeState('navHeight',navHeight)
    // 	// console.log('navHeight',toJS(this.props.personalHomeMod.state))
    // }).exec()
  }
  componentDidShow () {
    if (globalSystemInfo.ios) {
      globalSystemInfo = getSystemInfo();
      this.setState({
        configStyle: this.setStyle(globalSystemInfo)
      });
    }
  }
  handleBackClick () {
    if (isFunction(this.props.onBack)) {
      this.props.onBack();
    } else {
      const pages = Taro.getCurrentPages();
      if (pages.length >= 2) {
        Taro.navigateBack({
          delta: this.props.delta
        });
      }
    }
  }
  handleGoHomeClick () {
    if (isFunction(this.props.onHome)) {
      this.props.onHome();
    }
  }
  handleSearchClick () {
    if (isFunction(this.props.onSearch)) {
      this.props.onSearch();
    }
  }
  static defaultProps = {
    extClass: '',
    background: 'rgba(255,255,255,1)', //导航栏背景
    color: '#000000',
    title: '',
    searchText: '点我搜索',
    searchBar: false,
    back: false,
    home: false,
    iconTheme: 'black',
    delta: 1
  };

  setStyle (systemInfo) {
    const { statusBarHeight, navBarHeight, capsulePosition, navBarExtendHeight, ios, windowWidth } = systemInfo;
    const { back, home, title, color } = this.props;
    let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
    let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距

    let navigationbarinnerStyle = [
      `color:${color}`,
      //`background:${background}`,
      `height:${navBarHeight + navBarExtendHeight}px`,
      `padding-top:${statusBarHeight}px`,
      `padding-right:${leftWidth}px`,
      `padding-bottom:${navBarExtendHeight}px`
    ].join(';');
    let navBarLeft;
    if ((back && !home) || (!back && home)) {
      navBarLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition.height}px`,
        `margin-left:0px`,
        `margin-right:${rightDistance}px`
      ].join(';');
    } else if ((back && home) || title) {
      navBarLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition.height}px`,
        `margin-left:${rightDistance}px`
      ].join(';');
    } else {
      navBarLeft = [`width:auto`, `margin-left:0px`].join(';');
    }
    return {
      navigationbarinnerStyle,
      navBarLeft,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      rightDistance
    };
  }

  render () {
    const {
      navigationbarinnerStyle,
      navBarLeft,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      rightDistance
    } = this.state.configStyle;
    const {
      title,
      background,
      backgroundColorTop,
      back,
      home,
      searchBar,
      searchText,
      iconTheme,
      extClass
    } = this.props;
    let nav_bar__center;
    if (title) {
      nav_bar__center = <text>{title}</text>;
    } else if (searchBar) {
      nav_bar__center = (
        <View
          className='lxy-nav-bar-search'
          style={`height:${capsulePosition.height}px;`}
          onClick={this.handleSearchClick.bind(this)}
        >
          <View className='lxy-nav-bar-search__icon' />
          <View className='lxy-nav-bar-search__input'>{searchText}</View>
        </View>
      );
    } else {
      /* eslint-disable */
      nav_bar__center = this.props.renderCenter;
      /* eslint-enable */
    }
    return (
      <View
        className={`lxy-nav-bar ${ios ? 'ios' : 'android'} ${extClass}`}
        style={`background: ${backgroundColorTop ? backgroundColorTop : background};height:${navBarHeight +
          navBarExtendHeight}px;`}
      >
        <View
          className={`lxy-nav-bar__placeholder ${ios ? 'ios' : 'android'}`}
          style={`padding-top: ${navBarHeight + navBarExtendHeight}px;`}
        />
        <View
          className={`lxy-nav-bar__inner ${ios ? 'ios' : 'android'}`}
          style={`background:${background};${navigationbarinnerStyle};`}
        >
          <View className='lxy-nav-bar__left' style={navBarLeft}>
            {back && !home && (
              <View
                onClick={this.handleBackClick.bind(this)}
                className={`lxy-nav-bar__button lxy-nav-bar__btn_goback ${iconTheme}`}
              />
            )}
            {!back && home && (
              <View
                onClick={this.handleGoHomeClick.bind(this)}
                className={`lxy-nav-bar__button lxy-nav-bar__btn_gohome ${iconTheme}`}
              />
            )}
            {back && home && (
              <View className={`lxy-nav-bar__buttons ${ios ? 'ios' : 'android'}`}>
                <View
                  onClick={this.handleBackClick.bind(this)}
                  className={`lxy-nav-bar__button lxy-nav-bar__btn_goback ${iconTheme}`}
                />
                <View
                  onClick={this.handleGoHomeClick.bind(this)}
                  className={`lxy-nav-bar__button lxy-nav-bar__btn_gohome ${iconTheme}}`}
                />
              </View>
            )}
            {!back && !home && this.props.renderLeft}
          </View>
          <View className='lxy-nav-bar__center' style={`padding-left: ${rightDistance}px`}>
            {nav_bar__center}
          </View>
          <View className='lxy-nav-bar__right' style={`margin-right: ${rightDistance}px`}>
            {this.props.renderRight}
          </View>
        </View>
      </View>
    );
  }
}

export default NavBar;

2、NavBar.less

view,
text,
scroll-view,
input,
button,
image,
cover-view {
  box-sizing: border-box;
}
page {
  /* prettier-ignore */
  --height: 44PX; /* 4*2+32 */
  /* prettier-ignore */
  --right: 97PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  /* prettier-ignore */
  --navBarHeight: 68PX;
  box-sizing: border-box;
}
.lxy-nav-bar .ios {
  /* prettier-ignore */
  --height: 44PX; /* 4*2+32 */
  /* prettier-ignore */
  --right: 97PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  box-sizing: border-box;
}
.lxy-nav-bar .android {
  /* prettier-ignore */
  --height: 48PX; /* 8*2+32 */
  /* prettier-ignore */
  --right: 96PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  box-sizing: border-box;
}
.lxy-nav-bar .devtools {
  /* prettier-ignore */
  --height: 42PX; /* 5*2+32 */
  /* prettier-ignore */
  --right: 88PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  box-sizing: border-box;
}
.lxy-nav-bar__inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  /* prettier-ignore */
  height:  var(--navBarHeight);
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: 100%;
  /* prettier-ignore */
  padding-top: 20PX;
  /* prettier-ignore */
  padding-bottom:4PX;
  .placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.lxy-nav-bar__inner .lxy-nav-bar__left {
  position: relative;
  width: var(--right);
  /* prettier-ignore */
  height: 32PX;
  /*  padding-left: 10PX; */
  /* prettier-ignore */
  margin-left:10PX;
  display: flex;
  align-items: center;
}
.lxy-nav-bar__buttons {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  /* prettier-ignore */
  border-radius: 16PX;
  border: 1px solid rgba(204, 204, 204, 0.6);
  position: relative;
}
.lxy-nav-bar__buttons.android {
  border: 1px solid rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__buttons::after {
  position: absolute;
  content: '';
  width: 1px;
  /* prettier-ignore */
  height: 18.4PX;
  background: rgba(204, 204, 204, 0.6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.lxy-nav-bar__buttons.android::after {
  background: rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__button {
  width: 50%;
  height: 100%;
  display: flex;
  /* prettier-ignore */
  font-size: 12PX;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 2em;
}

.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback:active,
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome:active {
  opacity: 0.5;
}
.lxy-nav-bar__inner .lxy-nav-bar__center {
  /* prettier-ignore */
  font-size: 17PX;
  /* prettier-ignore */
  line-height: 17PX;
  text-align: center;
  position: relative;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* prettier-ignore */
  padding-left: 10PX;
  text {
    margin-top: -2px;
    font-size:34px;
    font-weight:550;
    line-height:44px;
  }
}
.lxy-nav-bar__inner .lxy-nav-bar__loading {
  font-size: 0;
}
.lxy-nav-bar__inner .lxy-nav-bar__loading .lxy-loading {
  margin-left: 0;
}
.lxy-nav-bar__inner .lxy-nav-bar__right {
  /* prettier-ignore */
  margin-right: 10PX;
}
.lxy-nav-bar__placeholder {
  height: var(--navBarHeight);
  background: #f8f8f8;
  position: relative;
  z-index: 50;
  visibility: hidden;
}

.lxy-nav-bar-search {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* prettier-ignore */
  height: 32PX;
  /* prettier-ignore */
  border-radius: 16PX;
  position: relative;
  background: #f6f6f6;
}

.lxy-nav-bar-search__input {
  height: 100%;
  display: flex;
  align-items: center;
  color: #999;
  /* prettier-ignore */
  font-size: 15PX;
  /* prettier-ignore */
  line-height: 15PX;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback.white {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome {
  background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M537.13744054-106.18008097999996c-12.56871953-12.56871953-31.42179957-12.56871953-50.27488108 0L28.10427953 195.46919964000006c-12.56871953 12.56871953-18.85308003 25.13744054-18.85308003 37.70616005l0 609.58292171c0 25.13744054 18.85308003 43.99052059 43.9905191 43.9905191l301.6492806 0c18.85308004 0 31.42179957-12.56871953 31.42180105-31.42179957l0-314.21800013c0-18.85308004 12.56871953-31.42179957 31.42179956-31.42180105l188.53080038 0c18.85308004 0 31.42179957 12.56871953 31.42179956 31.42180105l0 314.21800013c0 18.85308004 12.56871953 31.42179957 31.42180105 31.42179957L970.7582814 886.7488005c25.13744054 0 43.99052059-18.85308003 43.9905191-43.9905191L1014.7488005 233.17535969000005c0-12.56871953-6.2843605-25.13744054-18.85308003-37.70616005l-458.75827993-301.64928062z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  /* prettier-ignore */
  background-size: 17PX 34PX;
  margin-top: 10px;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome.white {
  background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M537.13744054-106.18008097999996c-12.56871953-12.56871953-31.42179957-12.56871953-50.27488108 0L28.10427953 195.46919964000006c-12.56871953 12.56871953-18.85308003 25.13744054-18.85308003 37.70616005l0 609.58292171c0 25.13744054 18.85308003 43.99052059 43.9905191 43.9905191l301.6492806 0c18.85308004 0 31.42179957-12.56871953 31.42180105-31.42179957l0-314.21800013c0-18.85308004 12.56871953-31.42179957 31.42179956-31.42180105l188.53080038 0c18.85308004 0 31.42179957 12.56871953 31.42179956 31.42180105l0 314.21800013c0 18.85308004 12.56871953 31.42179957 31.42180105 31.42179957L970.7582814 886.7488005c25.13744054 0 43.99052059-18.85308003 43.9905191-43.9905191L1014.7488005 233.17535969000005c0-12.56871953-6.2843605-25.13744054-18.85308003-37.70616005l-458.75827993-301.64928062z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  /* prettier-ignore */
  background-size: 17PX 34PX;
  margin-top: 10px;
}
.lxy-nav-bar-search__icon {
  /* prettier-ignore */
  width: 22PX;
  /* prettier-ignore */
  height: 22PX;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}
input{
    padding:0 20px !important;
    text-align: start !important;
}

属性：

在这里插入图片描述

slot:

在这里插入图片描述

在这里插入图片描述

带风的少年
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
使用taro自定义微信小程序导航栏
weixin_56436531的博客
03-26 2269
1.在app.config.js中的window配置项的内容替换为："navigationStyle":"custom" custom表示自定义导航栏，但会保留右上角胶囊按钮。 window: { // backgroundTextStyle: 'light', // navigationBarBackgroundColor: '#fff', // navigationBarTitleText: 'WeChat', // navigationBarTextStyle:
微信小程序自定义Navbar（Taro可直接使用）
曾经也是个少年
02-25 1355
image.png import React, { useState, useEffect } from "react"; import Taro, { useRouter, useDidShow } from "@tarojs/taro"; import { Input, View } from "@tarojs/components"; import { AtNavBar } fro...
Taro编译微信小程序实现顶部自定义导航栏
qq_41409353的博客
06-09 6160
【需求】 使用taro开发微信小程序的过程中，涉及到小程序的需要自定义顶部导航栏（导航栏渐变色），微信小程序中只能够设置固定的颜色，渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 【思路】 配置自定义导航栏设置 获取顶部状态栏高度、胶囊按钮高度、以及胶囊到顶部的高度 计算状态栏的高度，并赋值给dom元素 实现icon跳转及组件化 【代码】 1. 配置自定义导航栏设置 pages — demand — index.config.js export default { navi
小程序中实现自定义头部导航组件
最新发布
qq_45290368的博客
06-05 1343
小程序中实现自定义头部导航组件
taro react 微信小程序 自定义公共头部
有没有认真工作的博客
12-11 955
const backIcon: any = '返回icon地址'id: 1,avatarImg:'地址'},id: 2,avatarImg:'地址'},id: 3,avatarImg:'地址'},}, [])console.log('自定义事件')return (backNode={title={userList?
Taro 自定义顶部导航
weixin_44629546的博客
06-09 976
顶部导航
自定义Taro的navBar 组件
楠姐的博客
12-12 505
自定义navBar 组件
【Taro开发】-封装Form表单组件和表单检验（七）
Li-的博客
03-23 3222
Taro小程序开发 系列文章的所有文章的目录 【Taro开发】-初始化项目（一） 【Taro开发】-路由传参（二） 【Taro开发】-taro-ui（三） 【Taro开发】-带token网络请求封装（四） 【Taro开发】-自定义导航栏NavBar（五） 文章目录Taro小程序开发前言1、异步校验机制2、 FormItem组件3、Form组件4、校验规则5、使用 前言 基于Taro的微信小程序开发，主要组件库为Taro-ui。 formItem组件需满足前后缀，是否必填，校验提示。 form组件需能在s
taro + h5 并行开发，顶部返回按钮
weixin_40532650的博客
03-23 1481
1.场景：小程序开发，外层只套了个taro外壳，内部所有功能都在H5页面实现 2.目录 3.taro中首页为空页面，指向另一taro文件(home)，在home中使用webview跳转H5页面，这样一来，小程序顶部就会出现返回按钮 ...
小程序自定义导航栏兼容适配所有机型（附完整案例）
10-15
【小程序自定义导航栏兼容适配所有机型】在开发微信小程序时，官方提供了一套标准的导航栏配置，但有时我们需要实现更个性化的导航栏功能，例如集成搜索框、自定义背景图或添加返回首页按钮等。这时就需要自定义导航...
自定义微信底部导航栏，示例代码
07-27
在微信小程序开发中，自定义底部导航栏是提升用户体验和个性化设计的重要环节。本文将深入讲解如何实现这一功能，提供示例代码，并介绍相关知识点。 首先，了解微信小程序的底部导航栏（tabBar）默认样式和配置。...
header-navbar-小程序自定义导航栏，左上角胶囊按钮返回|首页详解.zip
09-23
小程序自定义导航栏，左上角胶囊按钮返回|首页详解详情介绍地址：https://juejin.im/post/5d0219536fb9a07ef06f8eab主要API获取设备信息wx.getSystemInfo获得胶囊按钮坐标信息wx.getMenuButtonBoundingClientRect项目截图
微信小程序自定义导航栏组件,导航,完美适配全部手机
01-27
小程序自定义导航栏适配 完美解决内容上下不居中 左右不居中 高度不合适的问题 Navigation Navigation 是小程序的顶部导航组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏 使用...
微信小程序自定义导航源码
03-22
本资源提供的"微信小程序自定义导航源码"是一个实现这一功能的示例代码，适用于那些希望在小程序中实现独特导航效果的开发者。 微信小程序本身提供了内置的导航组件`<navigator>`，但其样式和功能有限，无法满足...
微信小程序电商实战-你所困扰的自定义顶部导航栏都在这里
03-29
微信小程序及h5，基于taro，zoro最佳实践探索  微信小程序电商实战-解决你的登陆难问题 微信自6.6.0版本之后提供了自定义底部导航栏的功能，这使得我们的全屏页面设计成为了可能  首先演示下最终的实现效果 (此...
微信小程序 、taro3.x、uniapp 自定义导航栏头部、滑动渐变（仿小米Life小程序首页）
天涯尽头的拾荒者的博客
06-18 3856
文章目录前言一、效果（小米小程序）二 、我仿的效果三、代码逻辑1.index.jsx2.index.less3.index.config.js总结 前言 提示：一个小功能大致的逻辑： 1、自定义顶部导航栏： （1）、随着需求不断的变化，小程序原生导航栏头部已不满足现在的社会的客户了 （2）、顶部导航栏我们可以获取手机系统的信息，完全可以适配其他手机的尺寸Taro.getSystemInfoSync() （3）、看得出顶部导航栏由状态栏大小 + 小程序胶囊大小 + 胶囊距离状态栏高度 + 胶囊底部高度 =
自定义底部右侧信息支持html,Taro多端自定义导航栏Navbar+Tabbar实例
weixin_33454080的博客
05-31 745
运用taro实现多端导航栏/tabbar实例 (h5 + 小程序 + react native)最近一直在捣鼓taro开发，虽说官网介绍支持编译到多端，但是网上大多数实例都是h5、小程序，很少有支持rn端。恰好taro是基于react技术，想着之前也做过一些react项目，如是抱着好奇深究了一番，采坑了不少，尤其是编译到rn时样式问题。如上图：分别在h5、小程序、rn端运行效果◆taro引入阿里字...
解决Taro小程序windows下自定义导航栏无法生效的兼容性问题
qq_33539839的博客
08-30 1770
背景及发现的问题：小程序在手机、Mac下布局样式UI显示正常，但在windows下PC版微信上的小程序显示导航栏却出现了两个，自定义导航栏无法盖过默认导航栏生效，当前windows版微信版本3.3.5.42(已反馈此问题至微信，但当前版本仍未解决)，此问题不仅仅出现于本人的小程序中， 观察了如京东小程序、饿了么小程序等，都有同样的问题，页面会整体下移，导致部分功能可能无法正常显示及使用。 原因：windows版微信客户端对小程序设置自定义导航栏无法生效，即 navigationStyle=“custom
【Taro开发】-全局自定义导航栏适配AtMessage位置及相关问题（十四）
Li-的博客
04-20 2284
Taro小程序开发 系列文章的所有文章的目录 【Taro开发】-初始化项目（一） 【Taro开发】-路由传参及页面事件调用（二） 【Taro开发】-taro-ui（三） 【Taro开发】-带token网络请求封装（四） 【Taro开发】-自定义导航栏NavBar（五） 【Taro开发】-formData图片上传组件（六） 【Taro开发】-封装Form表单组件和表单检验（七） 【Taro开发】-tabs标签页及子组件的下拉刷新（八） 【Taro开发】-简易的checkBoxGroup组件（九） 【Taro
Taro微信小程序 webview嵌套vue3+vite项目实现通信 除了weixin-js-sdk
06-06
除了使用 `weixin-js-sdk`，在 Taro 微信小程序 webview 嵌套 Vue 3 + Vite 项目之间实现通信还有其他的方法，以下是一些常用的方法： 1. `window.postMessage()` 方法：可以通过 `window.postMessage()` 方法将消息发送到 Taro 微信小程序 webview 所在的 iframe 窗口。在 Taro 微信小程序中，可以通过监听 `message` 事件来接收从 Vue 3 + Vite 项目发送的消息。 2. WebSocket：可以使用 WebSocket 在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目之间建立一个双向通信的连接。在 Taro 微信小程序中，可以使用 `wx.connectSocket()` 方法来建立 WebSocket 连接，并通过监听 `wx.onSocketMessage()` 方法来接收从 Vue 3 + Vite 项目发送的消息。 3. Storage API：可以使用 Storage API 在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目之间共享数据。在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目中都可以使用 `localStorage` 或 `sessionStorage` 对象来存储和读取数据。 4. 通过 URL 参数传递数据：可以通过在 URL 中添加参数的方式传递数据。在 Taro 微信小程序 webview 和 Vue 3 + Vite 项目中都可以通过 `window.location.href` 或 `wx.navigateTo()` 方法来跳转页面，并在 URL 中添加参数。 以上是一些常用的在 Taro 微信小程序 webview 嵌套 Vue 3 + Vite 项目之间实现通信的方法，根据实际需求可以选择不同的方法来实现。需要注意的是，在使用这些方法时要确保数据的安全性和正确性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

带风的少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值