微信原生小程序自定义封装组件（以导航navbar为例）

javascript 复制代码

const App = getApp();
Component({
  // 组件的属性列表
  properties: {
    pageName: String, //中间的title
    showNav: { //判断是否显示左上角的按钮    
      type: Boolean,
      value: true
    },
    showHome: { //判断是否显示左上角的home按钮
      type: Boolean,
      value: true
    },
    showLocation:{
      type: Boolean,
      value: false      
    },
    showColor:String, //颜色
    showStore:String,
    showWhite:{
      type: Boolean,
      value: false      
    },
    titlecolor:String,//title
    titleleft:String,//title
    //中间是否是定位
  },
  // 组件的初始数据
  data: {
    // showNav: true, //判断是否显示左上角的home按钮
    // showHome: true, //判断是否显示左上角的按钮
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {
      this.setData({
        navHeight: App.globalData.navHeight, //导航栏高度
        navTop: App.globalData.navTop, //胶囊按钮与顶部的距离
        jnheight: App.globalData.jnheight, //胶囊高度
        jnwidth: App.globalData.jnwidth //胶囊宽度
      })
    }
  },
  // 组件的方法列表
  methods: {
    //回退
    navBack: function() {
      let pages = getCurrentPages();
      let prevpage = pages[pages.length - 2];
      prevpage.setData({
        isflag:true
      })
      wx.navigateBack()
    },
    //回主页
    navHome: function() {
      wx.reLaunch({
        url: '/pages/index/index'
      })
    },
    //跳转定位页面
    golocation:function(){
      wx.navigateTo({
        url: '/pages/switchcity/switchcity'
      })
    }
  }
})

json 复制代码

{
  "component": true,
  "usingComponents": {}
}

html 复制代码

<view class="navbar" style="height:{{navHeight}}px;background:{{showColor}};">
  <!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏，首页不显示 -->
  <view class="navbar_left"
  style="top:{{navTop}}px;height:{{jnheight}}px;width:{{jnwidth}}px;background:{{showWhite?'rgba(0,0,0,0.2)':''}};"
  wx:if="{{showNav}}">
    <!-- 控制返回按钮的显示 -->
    <view bindtap="navBack">
      <!-- <image src="../../images/back.png" mode="widthFix" style="width:40%"></image> -->
      <i class="iconfont iconfanhui" style="color:{{showWhite?'#fff':''}};"></i>
    </view>
    <!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏-->
    <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}">
      <!-- <image src="../../images/backhome.png" mode="widthFix" style="width:50%"></image> -->
      <i class="iconfont iconshouye" style="color:{{showWhite?'#fff':''}};"></i>
    </view>
  </view>
  <!-- 中间标题 -->
  <!-- <view wx:if="{{showLocation}}" style="top:{{navTop}}px;"  class="navbar_title">
    <view bindtap="golocation">{{pageName}}<i class="iconfont iconarrowtriangle_down_fill"></i></view>
  </view> -->
  <view class="navbar_title {{showWhite?'':''}}" style="top:{{navTop}}px;padding-left: {{titleleft}}px;color:{{titlecolor}}"><view>{{pageName}}</view></view>
  <!-- white_title  白色 -->
</view>

css 复制代码

@import "/static/css/icon.wxss";

.navbar {
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  flex-shrink: 0;
  position: fixed !important;
  z-index: 9999;
  background: white;
}

.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: 20rpx;
  z-index: 11;
  line-height: 1;
  border: 1rpx solid #f0f0f0;
  border-radius: 40rpx;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}

.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;
  text-align: center;
  height: 64rpx;
  line-height: 64rpx;
  position: absolute;
  left: 0;
  z-index: 10;
  font-size: 32rpx;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
}

.white_title {
  color: #fff !important;
}

.iconfont {
  font-size: 34rpx;
  font-weight: 600;
}

.iconarrowtriangle_down_fill {
  font-size: 20rpx;
  margin-left: 6rpx;
}

css 复制代码

@font-face {
  font-family: 'iconfont';  /* Project id 2408657 */
  src: url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff2?t=1705321879152') format('woff2'),
       url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff?t=1705321879152') format('woff'),
       url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.ttf?t=1705321879152') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconxuanzhong1:before {
  content: "\e631";
}

.iconweixuanzhong:before {
  content: "\e633";
}

.iconcaigoufapiao:before {
  content: "\e6b7";
}

.iconshangsheng1:before {
  content: "\e737";
}

.iconkefu:before {
  content: "\e625";
}

.iconFrame:before {
  content: "\e636";
}

.iconxiajiantou:before {
  content: "\eb6d";
}

.iconshangjiantou:before {
  content: "\eb6e";
}

.iconshangxiaqiehuan:before {
  content: "\e9cd";
}

.iconxiala2:before {
  content: "\e634";
}

.iconwenduxiajiang:before {
  content: "\e622";
}

.icondiandiandian:before {
  content: "\e6f5";
}

.iconliuyan1:before {
  content: "\e748";
}

.icondizhi:before {
  content: "\e63e";
}

.iconyunshu:before {
  content: "\e637";
}

.iconshang1:before {
  content: "\e64e";
}

.iconxia1:before {
  content: "\e64f";
}

.iconcha:before {
  content: "\e679";
}

.icona-xuanzhong:before {
  content: "\e602";
}

.iconbitian:before {
  content: "\e669";
}

.iconzuobiaofill:before {
  content: "\e768";
}

.icondianhua:before {
  content: "\e635";
}

.iconzuobiao:before {
  content: "\e615";
}

.iconshanchu:before {
  content: "\e601";
}

.icon4Sdian:before {
  content: "\e740";
}

.iconxiala1:before {
  content: "\e756";
}

.iconzhankaishangxia:before {
  content: "\e7b2";
}

.iconshang:before {
  content: "\e610";
}

.iconxia:before {
  content: "\e61b";
}

.iconxiala:before {
  content: "\e7b1";
}

.iconxuanzhong:before {
  content: "\e60d";
}

.iconarrowtriangle_down_fill:before {
  content: "\e620";
}

.iconshangsheng:before {
  content: "\e609";
}

.iconxiajiang:before {
  content: "\e738";
}

.iconchacha:before {
  content: "\e62f";
}

.iconright:before {
  content: "\eb1b";
}

.iconfanhui1:before {
  content: "\e61e";
}

.iconsousuo:before {
  content: "\e600";
}

.iconfanhui:before {
  content: "\e63b";
}

.iconshouye:before {
  content: "\e659";
}

html 复制代码

  <topnav pageName="导航"></topnav>

json 复制代码

{
  "usingComponents": {
    "topnav": "/component/topnav/topnav",
  },
  "navigationStyle":"custom",
  "navigationBarTitleText": "text"
}

微信原生小程序自定义封装组件（以导航navbar为例）

封装

使用