【微信小程序开发】自定义组件以及页面布局设计 )

【微信小程序开发】自定义组件以及页面布局设计

1.创建自定义组件
2...在tabs的wxml文件中定制组件模板
- 2.1.js中定义组件的属性
- 2.2.定义组件的相关事件
- 2.3在其他页面引用组件
- 2.4在使用组件的wxml页面中使用组件
- 2.5定义属性值
三。个人中心的实现

)

1.创建自定义组件

在这里插入图片描述
要新建component才可以使用组件

自动会生成4个文件，现在可以开始使用主件。

2…在tabs的wxml文件中定制组件模板

<!-- components/tabs/tabs.wxml -->
<!-- <text>components/tabs/tabs.wxml</text> -->
<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>

2.给模板设计样式

/* 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;
}

2.1.js中定义组件的属性

properties: {
   tabList:Object
  },

2.2.定义组件的相关事件

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

2.3在其他页面引用组件

{
  "usingComponents": { "tabs":"/components/tabs/tabs"},
  "navigationBarTitleText": "会议"
}

2.4在使用组件的wxml页面中使用组件

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

2.5定义属性值

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

在这里插入图片描述

三。个人中心的实现

wxml

<!--pages/ucenter/index/index.wxml-->
<view class="userInfo">
  <image class="userInfo-head" src="/static/persons/1.jpg"></image>
  <view class="userInfo-login">匿瘾</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">1</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">1</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">2</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">2</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">5</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>

wxss

/* pages/ucenter/index/index.wxss */
.userInfo{
  padding: 5px 0px 20px 10px;
  display: flex;
  align-items: center;
}
.userInfo-head{
  height: 80px;
  width: 80px;}
.userInfo-login{
  width: 245px;
  padding-left: 10px;
  font-weight: 700;
}
.userInfo-set{
  margin-right:20rpx ;
  color: rgb(196, 170, 56);
}
.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;![在这里插入图片描述](https://img-blog.csdnimg.cn/ce60b409eeb14b97b8e19d020777df83.png#pic_center)

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