1. Toy模板网首页
  2. > Toy博客

【微信小程序】自定义组件布局会议OA其他页面（附源码）

10月前 作者：Java方文山 分类：Toy博客 阅读(48) 违法举报

这篇具有很好参考价值的文章主要介绍了【微信小程序】自定义组件布局会议OA其他页面（附源码）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

🎉🎉欢迎来到我的CSDN主页！🎉🎉

🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯

👉点击这里，就可以查看我的主页啦！👇👇

Java方文山的个人主页

🎁如果感觉还不错的话请给我点赞吧！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

一、自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

1.创建自定义组件

在微信小程序的根目录下创建一个文件夹名为components，继续在components文件夹下创建文件夹tabs，选中tabs右击新建component输入定义的组件名会创建出json、wxml、wxss、js4个文件。

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

{
  "component": true
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

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

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

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

// components/tabs/tabs.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

2.使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

{
  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }
}

 这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

<tabs></tabs>

效果展示： 

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

3.自定义组件传值

 自定义组件传值需要注意的一个点就是不能以驼峰命名如果遇见是大写的字母要变成小写并在中间加一个“-”，例如我们的自定义组件属性值“innerText”，就要变成“inner-text”。

<tabs inner-text="自定义组件"></tabs>

效果演示：

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

小贴士：

如果你在创建自定义组件的时候出现以下问题

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

可以将以下代码复制到project.config.json中的setting中即可

    "ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,

4.注意事项

一些需要注意的细节

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
  • 注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：
  • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法，如 selectComponent 。
  • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）
  • 如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

二、自定义组件案例

学会了自定义组件的基本概念下面我就带领大家编写一个我们会议OA系统中所需的组件。

1.创建自定义组件

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

.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

var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

 2.使用自定义组件

list.json

{
  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }
}

list.js的data中定义属性

 tabs:['会议中','已完成','已取消','全部会议']

list.wxml

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

效果展示：

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

三、会议管理布局

现在我们需要考虑的就是点击相应的内容显示相应的数据，我们只需将所点击内容的index值传递，根据index值的不同进行不同数据的遍历即可。

1.定义所需数据

js

//定义所需数据

lists: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num': '304',
        'state': '进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num': '380',
        'state': '已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num': '500',
        'state': '进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num': '150',
        'state': '已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num': '217',
        'state': '进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num': '304',
        'state': '进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num': '380',
        'state': '已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num': '500',
        'state': '进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num': '304',
        'state': '进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num': '380',
        'state': '已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num': '304',
        'state': '进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num': '380',
        'state': '已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num': '500',
        'state': '进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num': '150',
        'state': '已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num': '217',
        'state': '进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  }

2.定义内容切换事件 

//定义点击内容显示相应的数据的方法

  tabsItemChange(e) {
    let tolists;
    if (e.detail.index == 1) {
      tolists = this.data.lists1;
    } else if (e.detail.index == 2) {
      tolists = this.data.lists2;
    } else {
      tolists = this.data.lists3;
    }
    this.setData({
      lists: tolists
    })
  }

3.布局会议管理 

wxml


<!-- 顶部信息栏 -->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<!-- 内容显示区 -->
<view style="height: 60px;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
  <view class="list" data-id="{{item.id}}">
    <view class="list-img">
      <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
    </view>
    <view class="list-detail">
      <view class="list-title"><text>{{item.title}}</text></view>
      <view class="list-tag">
        <view class="state">{{item.state}}</view>
        <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
      </view>
      <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
    </view>
  </view>
</block>
<view class="section">
  <text>到底啦</text>
</view>

wxss

/* pages/meeting/list/list.wxss */
.section{
  color: #aaa;
  display: flex;
  justify-content: center;
}

.list-info {
  color: #aaa;
}

.list-num {
  color: #e40909;
  font-weight: 700;
}

.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}

.state {
  margin: 0px 6px 0px 6px;
  border: 1px solid #93b9ff;
  color: #93b9ff;
}

.list-tag {
  padding: 3px 0px 10px 0px;
  display: flex;
  align-items: center;
}

.list-title {
  display: flex;
  justify-content: space-between;
  font-size: 11pt;
  color: #333;
  font-weight: bold;


}

.list-detail {
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 15px;
}

.video-img {
  width: 80px;
  height: 80px;
}

.list {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #6b6e74;
  padding: 10px;
}

.mobi-text {
  font-weight: 700;
  padding: 15px;
}

.mobi-icon {
  border-left: 5px solid #e40909;
}

.mobi-title {
  background-color: rgba(158, 158, 142, 0.678);
  margin: 10px 0px 10px 0px;
}

.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

效果演示：

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

四、投票管理布局

1.顶部导航栏

我们可以根据自定义组件完成，首先在相应的json文件中引用自定义组件。

  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }

 随后在js文件中定义我们所需要展示的内容。

  tabs: ['发起投票', '投票进行中', '已结束投票', '全部投票']

 最后直接在wxml中应用即可。

<tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange"></tabs>

 效果展示：

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

 2.定义内容切换事件

我们这里和刚刚的会议管理有些不同，我们刚刚的会议管理是点击不同的菜单显示不同的数据，但是这个的内容可就不是数据了，而是各不相同的组件，所以针对这个事情我们要做一个内容切换事件。

首先在我们的wxml中定义好每个菜单需要展示的内容并写好hidden样式

  <view class="{{componentStatus[0] ? '' : 'hidden'}}">发起投票</view>
  <view class="{{componentStatus[1] ? '' : 'hidden'}}">投票进行中</view>
  <view class="{{componentStatus[2] ? '' : 'hidden'}}">已结束投票</view>
  <view class="{{componentStatus[3] ? '' : 'hidden'}}">全部投票</view>
.hidden {
  display: none;
}

在js中定义好属性与事件

 componentStatus: [true,false, false, false]
  tabsItemChange(e) {
    let index = e.detail.index;
    //全部的组件赋值为false
    const lists = [false, false, false, false];
    //将所点击的组件赋值为true
    lists[index] = true;
    this.setData({
      componentStatus: lists // 更新 data 中的 componentStatus 属性值
    });
  }

 效果展示：

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

 3.布局投票管理

结合以上知识我们只需要将需要展示的内容放入view中即可，我这里只做一个演示。

wxml

 <!-- 发起投票 -->
<view class="{{componentStatus[0] ? '' : 'hidden'}}">
      <view class="title-view">基本信息</view>
      <input class="info-title" type="text" placeholder="选择所属会议" />
      <input class="info-title" type="text" placeholder="投票标题（最多30个字符）" />
      <view class="info-text">
        <textarea bindinput="handleInput" placeholder="请输入文本内容">
     </textarea>
      </view>
      
      <view class="image-container">
        <image src="{{imageUrl}}" mode="aspectFit"></image>
      </view>
      <button class="upload-button" bindtap="handleUploadImage">上传图片</button>

      <view class="title-view">选项设置</view>
      <input class="info-title" type="text" placeholder="请输入第一项（最多30个字符）" />
      <input class="info-title" type="text" placeholder="请输入第二项（最多30个字符）" />
      <view class="title-view">时间设置</view>
      <view class="time">
        <text> 开始时间：</text>
        <picker mode="date" bindchange="handleDateChange1">
          <input placeholder="请选择日期" disabled value="{{selectedDate1}}" />
        </picker>
        <picker mode="time" bindchange="handleTimeChange1">
          <input placeholder="请选择时间" disabled value="{{selectedTime1}}" />
        </picker>
      </view>
      <view class="time">
        <text>结束时间：</text>
        <picker mode="date" bindchange="handleDateChange2">
          <input placeholder="请选择日期" disabled value="{{selectedDate2}}" />
        </picker>
        <picker mode="time" bindchange="handleTimeChange2">
          <input placeholder="请选择时间" disabled value="{{selectedTime2}}" />
        </picker>
      </view>
      <button>发起投票</button>
    </view>

wxss

/* pages/vote/list/list.wxss */
.hidden {
  display: none;
}
.title-view{
  background-color: beige;
  font-weight: 700;
  padding-left: 7px;
}
.info-title{
padding: 5px 5px 10px 5px;
border-top:1px solid rgb(129, 129, 127);
}

.info-text{
  height: 100px;
  padding: 5px 5px 10px 5px;
  border-top:1px solid rgb(129, 129, 127);
}
.image{
  padding-left: 55px;
  display: flex;
  align-items: center;
}
.time{
  border-top:1px solid rgb(129, 129, 127);
  padding: 5px 0px 5px 0px;
  display: flex;
  align-items: center;
}
.image-container{
  padding-left: 60px;
}

js

// pages/vote/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: ['发起投票', '投票进行中', '已结束投票', '全部投票'],//顶部导航栏
    componentStatus: [true, false, false, false],//用于处理内容显示
    imageUrl: '',// 用于存储选择的图片路径
    selectedDate1: '', // 用于开始存储选择的日期
    selectedTime1: '',// 用于开始存储选择的时间
    selectedDate2: '', // 用于结束存储选择的日期
    selectedTime2: '' // 用于结束存储选择的时间
  },
  //结束时间选择
  handleTimeChange2(e) {
    const selectedTime = e.detail.value;
    this.setData({
      selectedTime2: selectedTime // 更新选择的时间，触发重新渲染
    });
  },
  //结束日期选择
  handleDateChange2(e) {
    const selectedDate = e.detail.value;
    this.setData({
      selectedDate2: selectedDate // 更新选择的日期，触发重新渲染
    });
  },
  //开始时间选择
  handleTimeChange1(e) {
    const selectedTime = e.detail.value;
    this.setData({
      selectedTime1: selectedTime // 更新选择的时间，触发重新渲染
    });
  },
  //开始日期选择
  handleDateChange1(e) {
    const selectedDate = e.detail.value;
    this.setData({
      selectedDate1: selectedDate // 更新选择的日期，触发重新渲染
    });
  },
  //图片选择器
  handleUploadImage() {
    wx.chooseImage({
      count: 1,
      success: (res) => {
        const imagePath = res.tempFilePaths[0];
        // 处理选择的图片路径
        console.log('选择的图片路径：', imagePath);
        this.setData({
          imageUrl: imagePath // 更新图片路径，触发重新渲染
        });
      }
    });
  },
  //点击导航栏进行切换下方内容
  tabsItemChange(e) {
    let index = e.detail.index;
    //全部的组件赋值为false
    const lists = [false, false, false, false];
    //将所点击的组件赋值为true
    lists[index] = true;
    this.setData({
      componentStatus: lists // 更新 data 中的 componentStatus 属性值
    });
  }  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

效果展示： 

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

五、个人中心布局

相对之前的内容这个还是比较简单的大家直接看代码就好。

1.wxml

<!--pages/ucenter/index/index.wxml-->
<view class="userInfo">
  <image class="userInfo-head" src="/static/persons/CSDN头像.jpg"></image>
  <view class="userInfo-login">Java方文山</view>
  <text class="userInfo-set">修改></text>
</view>

<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我发布的会议</text>
    <view class="cell-items-num">3</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我主持的会议</text>
    <view class="cell-items-num">4</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">投票的会议</text>
    <view class="cell-items-num">10</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">未投票的会议</text>
    <view class="cell-items-num">6</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我参与的会议</text>
    <view class="cell-items-num">11</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我审核的会议</text>
    <view class="cell-items-num">4</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>

<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">消息</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
    <text class="cell-items-title">设置</text>

  </view>
</view>

2.wxss

/* pages/ucenter/index/index.wxss */
.userInfo{
  padding: 5px 0px 20px 10px;
  display: flex;
  align-items: center;
}
.userInfo-head{
  height: 80px;
  width: 80px;
  border: 5px solid rgb(121, 212, 224);
}
.userInfo-login{
  width: 245px;
  padding-left: 10px;
  font-weight: 700;
}
.userInfo-set{
  color: rgb(146, 151, 155);
}
.cells{
  border-top: 8px solid rgb(238, 238, 238);
}
.cell-items{
  
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(238, 238, 238);
  padding-top: 20px;
  padding-bottom: 20px;
}
.cell-items-icon{
  height: 25px;
  width: 25px;
  padding: 0px 10px 0px 5px;
}
.cell-items-title{
  width: 340px;
}
.cell-items-num{
  width: 30px;
  font-weight: 700;
  color: rgb(218, 31, 31);
}
.cell-items-detail{
  color: rgb(146, 151, 155);
}

效果演示： 

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

六、总体效果展示

1.首页

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

2.会议

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

3.投票

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

4.个人中心

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发

 【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发​

到这里我的分享就结束了，欢迎到评论区探讨交流！！

💖如果觉得有用的话还请点个赞吧 💖

【微信小程序】自定义组件布局会议OA其他页面（附源码）,微信小程序开发实战,自定义组件,微信小程序,小程序,前端,个人开发文章来源地址https://www.toymoban.com/news/detail-715655.html

到了这里，关于【微信小程序】自定义组件布局会议OA其他页面（附源码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序会议OA系统

    微信小程序会议OA系统

    Flex弹性布局 Flex弹性布局是一种 CSS3 的布局模式，也叫Flexbox。它可以让容器中的元素按一定比例自动分配空间，使得它们在不同宽度、高度等情况下仍能保持整齐和密集不间隙地排列。 在使用Flexbox弹性布局时，首先需要创建一个容器和若干个子元素。容器的属性display需要设

    2024年02月08日
    浏览(51)
  • 微信小程序之开发会议OA项目

    微信小程序之开发会议OA项目

    目录 前言 本篇目标  首页 会议 投票  个人中心  会议OA项目-首页 配置 tabbar mock工具 page swiper 会议信息 会议OA项目-会议  自定义tabs组件 会议管理 会议OA项目-投票 会议OA项目-个人中心 文章含源码资源，投票及个人中心详细自行查看源码即可 小程序没有DOM对象，一切基于组

    2024年02月19日
    浏览(50)
  • 小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）

    小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）

                                            ⭐⭐ 小程序专栏：小程序开发专栏                                         ⭐⭐ 个人主页：个人主页 目录 一.前言 二.小程序自定义组件及其使用 2.1 自定义组件的使用 三.使用自定义组件完成会议功能界面的实

    2024年02月05日
    浏览(42)
  • 微信小程序&会议OA-登录获取手机号流程&登录-小程序&导入微信小程序SDK(从微信小程序和会议OA登录获取手机号到登录小程序导入微信小程序SDK)

    微信小程序&会议OA-登录获取手机号流程&登录-小程序&导入微信小程序SDK(从微信小程序和会议OA登录获取手机号到登录小程序导入微信小程序SDK)

    目录 获取用户昵称头像和昵称 wx.getUserProfile bindgetuserinfo 登录过程 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.j

    2024年02月04日
    浏览(53)

  • 微信小程序之会议OA首页后台交互

    springboot+mybatis appliation.yml 生成mapper接口，model实体类，mapper映射文件 application.yml 在启动类 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象

    2024年02月20日
    浏览(44)
  • 微信小程序OA会议系统数据交互

    微信小程序OA会议系统数据交互

    前言 经过我们所写的上一文章：微信小程序会议OA系统其他页面-CSDN博客 在我们的是基础面板上面，可以看到出来我们的数据是死数据，今天我们就完善我们的是数据 后台 在我们去完成项目之前我们要把我们的项目后台准备好资源我放在我资源中，大家可以用于参考，也可

    2024年02月08日
    浏览(42)
  • 微信小程序之会议OA个人中心后台交互

    微信小程序之会议OA个人中心后台交互

    目录 获取用户昵称头像和昵称 小程序登录 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.js util.js emoji wx.getUserProfi

    2024年02月22日
    浏览(73)
  • 微信小程序--数字化会议OA系统之首页搭建

    微信小程序--数字化会议OA系统之首页搭建

    布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持

    2024年02月08日
    浏览(51)
  • 微信小程序之会议OA首页数据交互，会议状态，会议人数转换，会议室交互，WXS的使用

    微信小程序之会议OA首页数据交互，会议状态，会议人数转换，会议室交互，WXS的使用

    前言： 本篇博客使用结合了SpringMVC，mybatis，maven，小程序，如果不熟悉使用可以翻看我之前的博客，以便大家可以更好的学习！！！ 这是我们今天完成后的效果： 1.1启动开发工具，导入后台 导入框架： 配置maven 注意数据库的名称： 启动 1.2导入数据表 1.3前台页面的编码（

    2024年02月08日
    浏览(55)
  • 【微信小程序】数字化会议OA系统之首页搭建（附源码）

    【微信小程序】数字化会议OA系统之首页搭建（附源码）

    🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里，就可以查看我的主页啦！👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧！🎁🎁 💖期待你的

    2024年02月08日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包