nav

最新推荐文章于 2024-09-08 18:37:15 发布

零小星

最新推荐文章于 2024-09-08 18:37:15 发布

阅读量450

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_43773083/article/details/106315860

版权

微信小程序专栏收录该内容

17 篇文章

订阅专栏

wxml

<view class="oc-head">
	<view class="head_bg" style="color: {{fontColorTop}}; background-color: {{backgroundColorTop}}; padding-top: {{top}}px; height: {{height}}px; font-size: {{fontSize}}px;"></view>
	<view class="head-container" style="padding-top: {{top}}px; height: {{height}}px;">
		<view style="color: {{fontColor}}; background-color: {{backgroundColor}};font-size: {{fontSize}}px;line-height: {{height}}px; ">{{title}}</view>
		<view class="leftBtn" style="height:{{height}}px;position:absolute;top:{{top}}px;left:5px;line-height:{{height}}px;">
			<block wx:if="{{ leftUser||leftArrow||leftText || iconImg }}">
				<view wx:if="{{leftUser}}" bindtap="icon">
					<image src="/images/icons/icon_user.png" style="width:20px;height:20px;vertical-align: middle;"></image>
				</view>
				<view wx:elif="{{ leftArrow }}" class="leftArrow" bindtap="back">
					<image src="/images/icons/btn_return_normal.png" style="width:20px;height:20px;vertical-align: middle;"></image>
				</view>
				<view wx:elif="{{ leftText }}" bindtap="icon">{{ leftText }}</view>
				<view wx:elif="{{ iconImg }}" bindtap="icon">
					<image src="{{iconImg}}" style="width:20px;height:20px;vertical-align: middle;"></image>
				</view>
			</block>
			<slot wx:else name="left" />
		</view>
	</view>
</view>

js


Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: '小程序标题'
    },
    // 按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
    fontColor: {
      type: String,
      value: '#FFFFFF'
    },
    // 导航栏背景
    backgroundColor: {
      type: String,
      value: '#1E5AA2'
    },
    // 顶部窗口（下拉）的背景色，仅 iOS 支持
    backgroundColorTop: {
      type: String,
      value: '#FFFFFF'
    },
    fontColorTop: {
      type: String,
      value: '#000000'
    },
    fontSize: {
      type: Number,
      value: 16
    },
    top: {
      type: Number,
      value: 20
    },
    height: {
      type: Number,
      value: 44
    },
    leftUser: {
      type: Boolean,
      value: false,
    },
    leftArrow: {
      type: Boolean,
      value: true,
    },
    leftText: String,
    iconImg: String,
  },
  /**
   * 组件的外部样式
   */
  externalClasses: [],
  /**
   * 组件的初始数据
   */
  data: {
    
  },
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
      this.init();
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  pageLifetimes: {
    show() {
      // 页面被展示
    },
    hide() {
      // 页面被隐藏
    },
    resize(size) {
      // 页面尺寸变化
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      let sysInfo = wx.getSystemInfoSync();
      let disTop = 8;
      if (sysInfo.platform == "ios") {
        // ios 端
        disTop = 6;
      }
      let height = 32 + disTop * 2;
      if (wx.canIUse('getMenuButtonBoundingClientRect')) {
        let MenuButton = wx.getMenuButtonBoundingClientRect();
        disTop = MenuButton.top - sysInfo.statusBarHeight;
        height = MenuButton.height + disTop * 2;
      }
      this.setData({
        top: sysInfo.statusBarHeight,
        fontSize: sysInfo.fontSizeSetting,
        height
      });
    },
    back() {
      wx.navigateBack({
        delta: 1
      })
    },
    icon(){
      this.triggerEvent("leftClick");
    },
  }
})

wxss

.oc-head {
  text-align: center;
  position: relative;
}

.head-container {
  position: fixed;
  /* z-index: 999; */
  top: 0;
  left: 0;
  width: 100%;
}