小程序：会议OA项目-其它页面

目录

一、tabs组件及会议管理布局

自定义tabs组件

跟着官网来感受一下

 会议管理的布局

二、个人中心布局

---

一、tabs组件及会议管理布局

自定义tabs组件

文档参考:自定义组件 | 微信开放文档

跟着官网来感受一下

 先建一个文件夹名为components，里面再建一个tabs的文件

 添加样式等

 tabs.wxml

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<!-- 这是自定义组件的内部 WXML 结构 -->
<view class="inner">
  {
  {innerText}}
</view>
<slot></slot>

tabs.wxss

/* components/tabs/tabs.wxss */
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

 tabs.js

// components/tabs/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 这里定义了 innerText 属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

 在要用到的页面

 效果图：

 改变内容

 会议管理的布局

tabs.wxml

<!--components/tabs/tabs.wxml-->
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{
  {tabList}}" wx:key="id" class="title_item  {
  {index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{
  {index}}">
            <view style="margin-bottom:5rpx">{
  {item}}</view>
            <view style="width:30px" class="{
  {index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

 tabs.wxss

/* components/tabs/tabs.wxss */
.tabs {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20rpx;
}

.tabs_title {
  /* width: 400rpx; */
  width: 90%;
  display: flex;
  font-size: 9pt;
  padding: 0 20rpx;
}

.title_item {
  color: #999;
  padding: 15rpx 0;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.item_active {
  /* color:#ED8137; */
  color: #000000;
  font-size: 11pt;
  font-weight: 800;
}

.item_active1 {
  /* color:#ED8137; */
  color: #000000;
  font-size: 11pt;
  font-weight: 800;
  border-bottom: 6rpx solid #333;
  border-radius: 2px;
}

tabs.js

<