小程序项目开发-其他页面

目录

一，自定义组件

二，会议管理

三，个人中心

---

一，自定义组件

自定义tab组件

文档参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

然后新建一个文件夹

 

tabs.json

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

tabs.wxml

    
        
            {{item}}
            
        
    
    
        
    

tabs.wxss

/* Components/tabs/tabs.wxss */
.inner {
  color: red;
}
.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

// Components/tabs/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

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

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

      this.setData({
          tabIndex:index
      })
    }
  }
})

二，会议管理

 

 

 list.json

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

 list.wxml

    
        
            
        
        
            {{item.title}}
            
                {{item.state}}
                {{item.num}}人报名
            
            {{item.address}}|{{item.time}}
        
    
 

 list.wxss(同index.wxss)

list.js

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

    /**
     * 页面的初始数据
     */
    data: {
      tabs:['会议中','已完成','已取消','全部会议'],
      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': '北京市·朝阳区'
        }
      ]
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },


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

    },

    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
        })
    }
})

三，个人中心

index.wxml

    
    用户登录
    


    
        
        我主持的会议
        1
        ＞
    
    

    
        
        我参与的会议
        1
        ＞
    


    
        
        我发布的投票
        1
        ＞
    
    

    
        
        我参与的投票
        1
        ＞
    


    
        
        消        息
        1
        ＞
    
    

    
        
        设        置
        1
        ＞
    

 index.wxss

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.userInfo{
  display: flex;
  height: 300rpx;
  width: 100%;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.userInfo-head{
  height: 200rpx;
  width: 200rpx;
  margin: 20rpx;
}
.userInfo-login{
  /* width: 400rpx; */
  /* display: flex; */
  /* align-items: center; */
  margin:100rpx 20rpx;
}
.userInfo-set{
  height: 100rpx;
  width: 100rpx;
  margin:120rpx 20rpx;
}
.userInfo-edit{
  color: gray;
  margin:100rpx 120rpx;
}
 
.cells{
  background-color: #fff;
  height: 270rpx;
}
.cell-items{
  height: 100rpx;
  display: flex;
  margin: 30rpx 0 0 0;
  /* border-bottom: 1px solid lightskyblue; */
}
.cell-items-icon{
  height: 90rpx;
  width: 90rpx;
}
.cell-items-title{
  font-weight: 700;
  font-size: 14px;
  margin: 20rpx 0 0 50rpx;
}
.cell-items-num{
  margin: 20rpx 0 0 300rpx;
}
.cell-items-detail{
  margin: 20rpx 0 0 20rpx;
}
.cells > hr{
  display: block;
  height: 1px;
  background-color: rgba(135, 206, 250, 0.075);
}

效果图如下