小程序组件开发（自定义头部）

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

备注：小程序组件 js文件不要写 page（）等，开发过程没有问题上传在真机上会报错

一下以自定义导航头部为实例：

header.js文件：

// pages/components/header/header.js
// // 启用插槽
Component({
  options: {
      multipleSlots: true
  },
  properties:{
    headerOpt:{
      type:Object,
      value:{
        showGoBack:true,
        showGoHome:true,
        backPath:'',
        homePath:'',
        styles:'',
        titleImg:'',
        title:'KOC'
      },
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
        this.data.headerOpt = { ...oldVal,  ...newVal  }
        this.setData({
          headerOpt:this.data.headerOpt
        })
        // console.log(this.data.headerOpt)
      }
    },
    // 状态栏高度
    statusBarHeight: {
      type:String,
      value:wx.getStorageSync('statusBarHeight') + 'px'
    },
    // 导航栏高度
    navigationBarHeight:{
      type:String,
      value: wx.getStorageSync('navigationBarHeight') + 'px'
    },
    // 胶囊按钮高度
    menuButtonHeight:{
      type:String,
      value: wx.getStorageSync('menuButtonHeight') + 'px'
    },
    // 导航栏和状态栏高度
    navigationBarAndStatusBarHeight:{
      type:String,
      value: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px'
    }
  },
  methods: {
    // 回到首页
    goHome(val) {
      // console.log(this.data.headerOpt.homePath)
      if(this.data.headerOpt.homePath !=''){
        wx.redirectTo({
          //目的页面地址 原页面保留
          url: '/pages' + this.data.headerOpt.homePath,
          success: function(res){},
        })
        return false
      }
      // if(pages.length > 1){
      //   wx.navigateBack({
      //     delta: pages.length
      //   });
      // }else{
        // 清除栈页面元素
        wx.reLaunch({
          //目的页面地址 原页面保留
          url: '/pages/kocindex/kocindex',
          success: function(res){},
        })
        var pages = getCurrentPages();
      // }
    },
    // 返回上一页或者指定页面
    goBack:function(){
      if(this.data.headerOpt.backPath !=''){
        wx.redirectTo({
          //目的页面地址 原页面保留
          url: '/pages' + this.data.headerOpt.backPath,
          success: function(res){},
        })
        return false
      }
      var pages = getCurrentPages();
      // console.log(pages)
      // return false;
      if(pages.length == 1){
        // 清除栈页面元素 回到首页
        wx.reLaunch({
          //目的页面地址 原页面保留
          url: '/pages/kocindex/kocindex',
          success: function(res){},
        })
      }else{
        wx.navigateBack();
      }
    }
},
})

View Code

header.json文件：

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

备注： "component": true,代表开启组件模式
　　　　"navigationStyle":"custom" 禁掉默认微信小程序自带返回等

header.wxml文件：

<!--pages/components/header/header.wxml-->
<wxs src="../../../filter/urlFilter.wxs" module="filter" />
<view class="navigation-container" style="{{headerOpt.styles +';'+ 'height: ' + navigationBarAndStatusBarHeight}}">
    <!--空白来占位状态栏-->
    <view style="{{'height: ' + statusBarHeight}}"></view>
    <!--自定义导航栏-->
    <view class="navigation-bar" style="{{'height:' + navigationBarHeight}}" >
        <view class="navigation-buttons {{(headerOpt.showGoBack && !headerOpt.showGoHome)?'clearBoder':''}}" style="{{'height:' + menuButtonHeight}}" wx:if="{{headerOpt.showGoBack || headerOpt.showGoHome}}">
            <view wx:if="{{headerOpt.showGoBack}}" bindtap="goBack" class="goback"><image mode="widthFix" src="{{filter.imgFullPath('/images/goback.png')}}"></image></view>
            <view wx:if="{{headerOpt.showGoHome}}" bindtap="goHome" class="gohome"><image mode="widthFix" src="{{filter.imgFullPath('/images/gohome.png')}}"></image></view>
        </view> 
        <view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">
            <image  wx:if="{{headerOpt.titleImg !=''}}" src="{{filter.imgFullPath(headerOpt.titleImg)}}" style="{{headerOpt.imgStyle}}"></image>
            <text wx:else style="{{headerOpt.styles}}">{{headerOpt.title}}</text>
        </view>
    </view>    
</view>
<!--空白占位fixed空出的位置-->
<view style="{{'height: ' + navigationBarAndStatusBarHeight}};"></view>

View Code

header.wxml文件：

/* pages/components/header/header.wxss */
/* navigationBar.wxss */
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  /* top: 4rpx; */
  left: 0;
  background-color: #ffffff;
  overflow: hidden;
}
.navigation-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navigation-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  border-radius: 15px;
  background-color: transparent;
  padding: 0rpx 10rpx;
}
.clearBoder{
  border:0rpx;
}
.nav-img{
  height: 16px;
  width: 16px;
}
.navigation-title {
  position: absolute;
  left: 104px;
  right: 104px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation-title text{
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation-buttons .goback{padding: 0rpx 25rpx;line-height: 25rpx;}
.navigation-buttons .gohome{padding: 0rpx 25rpx;line-height: 25rpx;}
.navigation-buttons .goback image{width: 40rpx;height: 40rpx;}
.navigation-buttons .gohome image{width:34rpx;height: 34rpx;}