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