小程序导航栏组件

最新推荐文章于 2024-05-18 18:15:28 发布
最新推荐文章于 2024-05-18 18:15:28 发布
阅读量871 收藏 2
点赞数 2
文章标签： 小程序 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44247511/article/details/120868615
版权

因为需要经常封装小程序的顶部导航栏组件，所以干脆直接写了一个顶部导航栏组件
不多bb上才艺
wxml文件

<view class="lxy-nav-bar {{extClass}}" style="background: {{backgroundColorTop}};height: {{navBarHeight+ navBarExtendHeight}}px;">
    <view class="lxy-nav-bar__placeholder {{ios ? 'ios' : 'android'}}" style="padding-top: {{navBarHeight+ navBarExtendHeight}}px;visibility: hidden;"></view>
    <view class="lxy-nav-bar__inner {{ios ? 'ios' : 'android'}}" style="{{navigationbarinnerStyle}}{{displayStyle}}">
        <view class='lxy-nav-bar__left' style="{{navBarLeft}}">
            <block wx:if="{{back&&!home}}">
                <view bindtap="back" class="lxy-nav-bar__button lxy-nav-bar__btn_goback {{iconTheme}}"></view>
            </block>
            <block wx:if="{{!back&&home}}">
                <view bindtap="home" class="lxy-nav-bar__button lxy-nav-bar__btn_gohome {{iconTheme}}"></view>
            </block>
            <block wx:elif="{{back&&home}}">
                <view class="lxy-nav-bar__buttons {{ios ? 'ios' : 'android'}}" wx:if="{{home}}">
                    <view bindtap="back" class="lxy-nav-bar__button lxy-nav-bar__btn_goback {{iconTheme}}" wx:if="{{back}}"></view>
                    <view bindtap="home" class="lxy-nav-bar__button lxy-nav-bar__btn_gohome {{iconTheme}}"></view>
                </view>
            </block>
            <block wx:else>
                <slot name="left"></slot>
            </block>
        </view>
        <view class='lxy-nav-bar__center'>
            <block wx:if="{{title}}">
                <text class='lxy-nav-bar__center-title'>{{title}}</text>
            </block>
            <view class='lxy-nav-bar-search' style="height:{{capsulePosition.height}}px;" wx:elif="{{searchBar}}" bindtap="search">
                <view class='lxy-nav-bar-search__icon' />
                <view class='lxy-nav-bar-search__input'>{{searchText}}</view>
            </view>
            <!-- 暂时不开发标题loading. 看后期需要 -->
            <!-- <view wx:if="{{loading}}" class="lxy-nav-bar__loading">
                <view class="lxy-loading" style="width:{{size.width}}rpx;height:{{size.height}}rpx;"></view>
            </view> -->
            <block wx:else>
                <slot name="center"></slot>
            </block>
        </view>
        <view class='lxy-nav-bar__right'>
            <slot name="right"></slot>
        </view>
    </view>
</view>

wxss文件

view,
text,
scroll-view,
input,
button,
image,
cover-view {
  box-sizing: border-box;
}
page {
  --height: 44px; /* 4*2+32 */
  --right: 97px; /* 10+87 */
  --navBarExtendHeight: 4px;
  box-sizing: border-box;
}
.lxy-nav-bar .ios {
  --height: 44px; /* 4*2+32 */
  --right: 97px; /* 10+87 */
  --navBarExtendHeight: 4px;
  box-sizing: border-box;
}
.lxy-nav-bar .android {
  --height: 48px; /* 8*2+32 */
  --right: 96px; /* 10+87 */
  --navBarExtendHeight: 4px;
  box-sizing: border-box;
}
.lxy-nav-bar .devtools {
  --height: 42px; /* 5*2+32 */
  --right: 88px; /* 10+87 */
  --navBarExtendHeight: 4px;
  box-sizing: border-box;
}
.lxy-nav-bar__inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  height: var(--height);
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: 100%;
  padding-bottom: var(--navBarExtendHeight);
}
.lxy-nav-bar__inner .lxy-nav-bar__left {
  position: relative;
  width: var(--right);
  height: 32px;
  /*  padding-left: 10px; */
  display: flex;
  align-items: center;
}
.lxy-nav-bar__buttons {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 16px;
  border: 1rpx solid rgba(204, 204, 204, 0.6);
  position: relative;
}
.lxy-nav-bar__buttons.android {
  border: 1rpx solid rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__buttons::after {
  position: absolute;
  content: '';
  width: 1rpx;
  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;
  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 {
  font-size: 17px;
  line-height: 17px;
  text-align: center;
  position: relative;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
}
.lxy-nav-bar__inner .lxy-nav-bar__center .lxy-nav-bar__center-title {
  margin-top: -2px;
}
.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 {
  margin-right: 10px;
}
.lxy-nav-bar__placeholder {
  height: var(--height);
  background: #f8f8f8;
  position: relative;
  z-index: 50;
}

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

.lxy-nav-bar-search__input {
  height: 100%;
  display: flex;
  align-items: center;
  color: #999;
  font-size: 15px;
  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='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  background-size: 22px 22px;
}
.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='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  background-size: 22px 22px;
}
.lxy-nav-bar-search__icon {
  width: 22px;
  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;
}

js文件

Component({
  options: {
    multipleSlots: true,
    addGlobalClass: true
  },
  properties: {
    extClass: {
      type: String,
      value: ''
    },
    background: {
      type: String,
      value: 'rgba(255, 255, 255, 1)',
      observer: '_showChange'
    },
    backgroundColorTop: {
      type: String,
      value: 'rgba(255, 255, 255, 1)',
      observer: '_showChangeBackgroundColorTop'
    },
    color: {
      type: String,
      value: 'rgba(0, 0, 0, 1)'
    },
    title: {
      type: String,
      value: ''
    },
    searchText: {
      type: String,
      value: '点我搜索'
    },
    searchBar: {
      type: Boolean,
      value: false
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    },
    iconTheme: {
      type: String,
      value: 'black'
    },
    /* animated: {
      type: Boolean,
      value: true
    },
    show: {
      type: Boolean,
      value: true,
      observer: '_showChange'
    }, */
    delta: {
      type: Number,
      value: 1
    }
  },
  created: function() {
    this.getSystemInfo();
  },
  attached: function() {
    this.setStyle(); //设置样式
  },
  data: {},
  pageLifetimes: {
    show: function() {
      if (getApp().globalSystemInfo.ios) {
        this.getSystemInfo();
        this.setStyle(); //设置样式1
      }
    },
    hide: function() {}
  },
  methods: {
    setStyle: function(life) {
      const {
        statusBarHeight,
        navBarHeight,
        capsulePosition,
        navBarExtendHeight,
        ios,
        windowWidth
      } = getApp().globalSystemInfo;
      const { back, home, title } = this.data;
      let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
      let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距

      let navigationbarinnerStyle = [
        `color: ${this.data.color}`,
        `background: ${this.data.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`].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(';');
      }
      if (life === 'created') {
        this.data = {
          navigationbarinnerStyle,
          navBarLeft,
          navBarHeight,
          capsulePosition,
          navBarExtendHeight,
          ios
        };
      } else {
        this.setData({
          navigationbarinnerStyle,
          navBarLeft,
          navBarHeight,
          capsulePosition,
          navBarExtendHeight,
          ios
        });
      }
    },
    _showChange: function(value) {
      this.setStyle();
    },
    // 返回事件
    back: function() {
      this.triggerEvent('back', { delta: this.data.delta });
    },
    home: function() {
      this.triggerEvent('home', {});
    },
    search: function() {
      this.triggerEvent('search', {});
    },
    getSystemInfo() {
      var app = getApp();
      if (app.globalSystemInfo && !app.globalSystemInfo.ios) {
        return app.globalSystemInfo;
      } else {
        let systemInfo = wx.getSystemInfoSync();
        let ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);
        let rect;
        try {
          rect = wx.getMenuButtonBoundingClientRect ? wx.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) {
          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

        app.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了

        //console.log('systemInfo', systemInfo);
        return systemInfo;
      }
    }
  }
});

负责组件导出的app.js

// eslint-disable-next-line import/prefer-default-export
export { default as navBar } from './navBar';

组件的package.json文件

{
  "name": "weapp-navigation-bar",
  "version": "2.2.1",
  "description": "原生封装的自定义导航栏  可自定义返回事件 返回home 搜索框 自定义左中右",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "weapp",
    "miniprogram",
    "navbar",
    "navigation-bar",
    "navigationbar"
  ],
  "repository": {
    "type": "git",
    "url": "http://www.haoge.run"
  },
  "author": "lxy",
  "license": "ISC",
  "dependencies": {}
}

search
search
back
back
home
home

把这三个图片放到根路径下面的images文件夹里面

根路径文件配置
app.json

{
  "pages": [
    "pages/index/index",
    "pages/demo1/index",
    "pages/demo2/index",
    "pages/demo3/index",
    "pages/demo4/index",
    "pages/demo5/index",
    "pages/demo6/index",
    "pages/demo7/index",
    "pages/demo8/index",
    "pages/demo9/index",
    "pages/demo10/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "自定义导航栏",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "navBar": "/components/navBar/navBar"
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

/* page {
  background-color: #e5e5e5;
} */
.main {
  /* prettier-ignore */
  height: 800PX;
  background: #eeeeee;
  padding-top: 100rpx;
  font-size: 30rpx;
  line-height: 60rpx;
  /* prettier-ignore */
  padding: 30rpx;
  text-align: center;
}
.main .p.active {
  color: #087ad8;
  text-align: left;
}
.main .p.active:active {
  color: #0397fa;
}

/**app.wxss**/
.container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 200rpx 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main {
  /* prettier-ignore */
  height: 400PX;
  height: 100vh;
  background: #eeeeee;
  padding-top: 100rpx;
  font-size: 30rpx;
  line-height: 60rpx;
  padding: 30rpx;
  text-align: center;
}

.lxy-nav-bar-search {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  /* prettier-ignore */
  height: 32PX;
  /* prettier-ignore */
  font-size: 16PX;
  /* prettier-ignore */
  border-radius: 16PX;
  /* prettier-ignore */
  padding-left: 5PX;
  position: relative;
  background: #f6f6f6;
}

.srch-ipt {
  /* prettier-ignore */
  height: 32PX;
  text-align: left;
  /* prettier-ignore */
  font-size: 15PX;
}

.ipt-placeholder {
  /* prettier-ignore */
  font-size: 15PX;
  color: #bebebe;
  text-align: left;
}

.lxy-nav-bar-search__input {
  flex: 1;
}

.lxy-nav-bar-search__icon {
  /* prettier-ignore */
  width: 22PX;
  /* prettier-ignore */
  height: 22PX;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADBklEQVRoQ+2YS3IaMRCGu7UQ7MINjE9gcgLjEyTcADZoZuXcIPYJglczYgOcINwg+ATBJwg5gZMlLNSpdiTXZMpV1mOo4KpRFQuXZ1r99d9qdQ/CG1/4xv2HFuB/K9gq0CqQGIE2hRIDmPx6IwosFovefr+/BICPANDnHyL2iWhjPVwLIe6n0+k22eOagSQAdvxwOFwDwCcA6FnbPwFgV9lnAADv+G8GIqLbPM8dWDJPNIDWmqO9sI7fG2OW3W53PZlMftW9ms/nA2PMGBHHFmYtpZy89GwoURSA1poj/gUAfgPAWCm19tnYptoSET8AwNYYM8rzvKqWj5l/ngkGKIpiLIRYENFDp9MZxkTR2WAIKeVVjA1HEQTAqUBE31OcdxtXINZKqVFw6O0LQQBaa5a7Z4wZpErP+5dlOUPEa2PMJM/zZQyEN0AlYrdKqZuYzerv2Cq2I6LHLMvOY2x6A5RluUXEnlKK63xjqxKYkW8xqG7uBVAURV8I8QMAVkopLoWNrVTbvgBPlQcAoqL0Gi2ry/dDTBp5AWitOec/I+L7Y7QDZVmu+W5QSnn5E5xCDiBmg9eiz/9Pse9FnLLBSQEYY66abMQcnNaam7vLGIV9FeDG7euxDrG9ICGmRHsB2Avn8ZhllIjusizjJjFoeQHYg8YyX0gpz1Oar7p3qRXOG6AoiqEQ4hsANN1K8AX5oJQaBoU+spl7OmxN3Qeu/qcUB28FGNi20wxBqankUic2951aQQD2LDxVJCLaCSFGMTeza6N5rsiyjGfm6BUMUIHg/p0AYCalvPM52HyOEJFbkud8T5kF2JcogEo68Sx8xmogIvczq7oitgTzDMzK8Y/XrZRytt/vN4h4kQIRDeA0t/08N3tn1TywUPXZYWWMuXHTnB3ykyCSAZzT9oBzanBOPztORDwIbaSUm5fSLBWiMYDoU8gfl/5+2YtS4iQAGD4W4mQA6hC+jeNJAVQg+Ovd0mfIPzmA0LPUAoRGrOnnWwWajmiovVaB0Ig1/XyrQNMRDbX3B3I3pUA0WyZuAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: cover;
}

.location {
  /* prettier-ignore */
  font-size: 14PX;
  /* prettier-ignore */
  width: 52PX;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  position: relative;
  /* prettier-ignore */
  padding-left: 10PX;
}

.location .icon {
  width: 0;
  height: 0;
  /* prettier-ignore */
  border-left: 5PX solid transparent;
  /* prettier-ignore */
  border-right: 5PX solid transparent;
  /* prettier-ignore */
  border-top: 5PX solid #fff;
  /* prettier-ignore */
  margin-left: 2.5PX;
}

.location .btn {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

app.js

//app.js
import page from './utils/page';
App({
    onLaunch: function() {
        Page = page;
    },
    //globalData: {}
})

然后见证奇迹的时候到了,开始渲染页面

pages下面的index.wxml

<view class='main-wrapper'>
    <navBar background='#fff' searchBar="{{true}}" bindsearch='search' />
    <view class='main'>
        <navigator url='/pages/demo1/index'>
            <view class='p active'>例子1: 点击跳转搜索页</view>
        </navigator>
        <navigator url='/pages/demo2/index'>
            <view class='p active'>例子2: 点击跳转左侧有返回 home的详情页面</view>
        </navigator>
        <navigator url='/pages/demo3/index'>
            <view class='p active'>例子3: 点击跳转详情页</view>
        </navigator>
        <navigator url='/pages/demo4/index'>
            <view class='p active'>例子4: 点击跳转详情页,深背景色,白色主题</view>
        </navigator>
        <navigator url='/pages/demo5/index'>
            <view class='p active'>例子5: 点击跳转,深背景色,白色主题有home</view>
        </navigator>
        <navigator url='/pages/demo6/index'>
            <view class='p active'>例子6: 点击跳转自定义左侧栏目带自定义搜索框</view>
        </navigator>
        <navigator url='/pages/demo7/index'>
            <view class='p active'>例子7: 点击跳转自定义左侧栏目带标题</view>
        </navigator>
        <navigator url='/pages/demo8/index'>
            <view class='p active'>例子8: 修改自定义样式和图标用法</view>
        </navigator>
        <navigator url='/pages/demo9/index'>
            <view class='p active'>例子9: 导航头部透明,不占据位置显示</view>
        </navigator>
        <navigator url='/pages/demo10/index'>
            <view class='p active'>例子10: 渐变色动态修改导航颜色</view>
        </navigator>
    </view>
</view>

index.js

//index.js
//获取应用实例
//const app = getApp();

Page({
  data: {
    loading: false,
    color: '#000',
    background: '#fff',
    show: true,
    animated: false
  },

  onLoad: function() {},
  search: function() {
    wx.navigateTo({
      url: '/pages/demo1/index'
    })
  }
});

wxss文件

.lxy-nav-bar-search__input {
  display: block;
  flex: none;
}

其余九个demo下载地址

剩下的九个demo

完整demo

如果对你有用的话点个赞就好

haoge568
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序自定义顶部导航栏封装
我爱学习的博客
04-27 489
微信小程序自定义顶部导航栏封装 先在page.json中找到要自定义导航栏的页面，给"style"设置属性"navigationStyle":“custom”，设置后默认的导航栏就没有，我们就可以自定义了。 下面是我自己封装的一个导航栏，用的是uni-app。 <template> <view class="pageHead"> <view class="headContent"> <uni-icons v-if="backIcon" class="ba
微信小程序自定义导航栏组件,导航,完美适配全部手机
01-27
Navigation 是小程序的顶部导航组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏 使用 下载项目代码 git clone https://github.com/lingxiaoyi/Taro-navigation-bar.git 进入...
uniapp自定义小程序头部导航栏,navigationbar,封装成公共组件带返回按钮和标题,带图片logo,实现导航栏下方滚动,。(组件代码在最下方)以下是组件的完整代码。
m0_60531448的博客
08-31 1943
uniapp自定义小程序头部导航栏,navigationbar,封装成公共组件带返回按钮和标题,带图片logo,实现导航栏下方滚动,。(组件代码在最下方)以下是组件的完整代码。
Vue.js中组件化开发实践：自定义导航栏与TabBar组件的设计与实现
最新发布
chenchuang0128的博客
05-18 420
摘要随着前端技术的发展和业务的日益复杂，组件化开发成为提升开发效率和降低维护成本的关键。本文将以Vue.js框架为基础，探讨如何设计并实现一个自定义的导航栏与TabBar组件，特别是针对iOS机型的适配和头部导航的自定义。通过阿里巴巴矢量图标库的使用，我们将展示如何为组件添加高度和图标自定义的功能。一、引言在前端开发中，导航栏和TabBar是常见的界面元素，对于用户体验和界面美观度至关重要。然而，传统的开发方式往往将这些元素作为整体应用的一部分，导致修改和维护变得困难。
小白开发微信小程序13--导航组件和媒体组件
hqwest的专栏
03-07 570
微信团队为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的，开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签，只不过标签名字不一样。扫码二维码功能，需升级微信客户端至6.7.3。从基础库 1.6.0 开始，本接口停止维护，请使用 wx.createInnerAudioContext 代替。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。如果是本地视频，需要搭建nginx服务器。
微信小程序自定义导航栏组件
weixin_48372590的博客
11-17 996
微信小程序自定义导航栏组件
微信小程序 -- 获取自定设备参数
小草莓的博客
08-09 543
/** * getSystemInfoSync [获取系统信息(同步版)] Promise 封装 */ const $getSystemInfoSync = () => { return new Promise((resolve, reject) => { try { const res = wx.getSystemInfoSync() re...
微信小程序colorui组件库自定义导航栏和tabbar
04-24
微信小程序引入colorui组件库，自定义导航栏和tabbar，仅用于个人记录学习之用
小程序组件之自定义顶部导航实例
12-10
前言 微信小程序凭借着“不占内存，即用即走”等特点，加上...目前，大多小程序对自定义导航的设计是：标题居中；左侧胶囊包裹返回上一页按钮和到首页按钮，要和右侧系统默认胶囊样式布局一致。效果如下： 功能设计
一个自适应的微信小程序自定义导航栏组件
01-27
因为小程序原生导航栏的一些限制，比如：不能设置字体大小，ios标题居中而安卓居左，从非首页启动小程序返回首页菜单不明显，屏幕空间不能最大化使用。因此微信开放了小程序自定义导航栏，允许用户最大化的使用屏幕...
微信小程序自定义导航栏
10-17
在微信小程序开发中，自定义导航栏是一项常见的需求，它能帮助开发者实现更个性化的界面设计，提升用户体验。本文将详细介绍如何在微信小程序中自定义导航栏。 首先，微信小程序默认提供了一定程度的导航栏配置，但...
微信小程序，自定义导航栏组件
羽筠的博客
08-12 1534
可定义设置的内容如下： 文字及返回箭头颜色 背景图片（优先级高于 背景色） 背景色 页面标题 页面标题显示图片（优先级高于 页面标题） 是否显示返回菜单 是否显示 页面主体顶部被自定义菜单挡住部分(false则主体内容会被导航栏遮盖) 组件相关代码： .wxss page, view, scroll-view, swiper, swiper-item, button, input, textarea, label, navigator, image{ box-sizing: border-box;
微信小程序自定义头部导航nav
张营的技术博客
12-17 2958
自定义微信小程序头部nav导航，可以自定义标题、返回按钮、颜色、背景图等。
小程序自定义navigationBar组件以及上滑修改navigationBar
weixin_42831795的博客
08-30 1375
自定义小程序navigationBar组件以及滑动页面时动态修改navigationBar
vue3 伸缩菜单组件
m0_58565372的博客
01-04 2033
3.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navHeader文件，在navHeader文件下创建index.vue文件。4.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navSide文件，在navSide文件下创建index.vue文件。2.在router文件下的index.ts写入。以上就是封装伸缩菜单栏组件的代码。
微信小程序学习笔记——常见组件【navigator】导航组件
qq_37899792的博客
04-15 4096
导航组件navigator 0.块级元素默认会换行可以直接加宽度和高度 1.url要跳转的页面路径绝对路径相对路径 2.target要跳转到当前的小程序还是其他的小程序的页面 self默认值，自己小程序的页面 miniProgram其他小程序的页面 3.open-type跳转方式...
小程序导航组件navigator活学活用
沉默的小猴子的博客
11-07 2980
小程序开发中必不可少的组件navigator，虽然使用频率非常高，但是却没多少人能灵活运用。 先说navigator组件的用处： 它的主要用处是跳转执行，跳转可分为当前页面内跳转、前往页面外部的跳转。 其中，在官方文档中有明确示例： &lt;view class="btn-area"&gt; &lt;navigator url="/page/navigate/navigate?title=na...
小程序组件（导航组件）
cmwly的博客
02-28 958
functional-page-navigator（仅在插件中有效，用于跳转到插件功能页） 属性 类型 默认值 必填 说明 最低版本 version string release 否 跳转到的小程序版本，线上版本必须设置为 release 2.1.0 name string 否 要跳转到的功能页 2.1.0 args object 否 功能页参数，参数格式与具体功能页相...
微信小程序自定义底部导航栏组件
baidu_41632421的博客
04-15 1532
先看效果图 实现方式为将底部导航栏封装为组件, 在tabBar界面中引用, 下面是步骤和代码: 1.在根目录, 也就是pages同级目录下创建components文件夹, 然后在components文件夹下创建tabBar.js,tabBar.json,tabBar.wxml,tabBar.wxss这四个文件, 如图: 2.tabBar.json的代码 { "component": true } 3.tabBar.wxml的代码 &lt...
微信小程序+vant组件 侧边导航栏滚动
09-10
微信小程序中使用 Vant 组件库的侧边导航栏滚动，需要首先在项目中引入 Vant 组件库，并且按照 Vant 的文档进行组件的配置和使用。 首先，在项目根目录下的 `app.json` 文件中配置 Vant 组件的全局样式，示例如下：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

haoge568

不要超过你的早饭钱

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

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

打赏作者

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

抵扣说明：

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

余额充值