微信小程序【练手小页面】
会议管理
自定义tabs组件
文档参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
- tabs.json
{
"component": true,
"usingComponents": {}
}
- tabs.wxml
{{item}}
- 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
})
}
}
})
会议管理
- list.json
{
"usingComponents": {
"tabs":"/components/tabs/tabs"
}
}
- list.wxml
{{item.title}}
{{item.state}}
{{item.num}} 人报名
{{item.location}} |{{item.starttime}}
- list.wxss
.list {
display: flex;
flex-direction: row;
width: 100%;
padding: 0 20rpx 0 0;
border-top: 1px solid #eeeeee;
background-color: #fff;
margin-bottom: 5rpx;
/* border-radius: 20rpx;
box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}
.list:nth-of-type(1){
margin-top:100rpx;
}
.list-img {
display: flex;
margin: 10rpx 10rpx;
width: 150rpx;
height: 220rpx;
justify-content: center;
align-items: center;
}
.list-img .video-img {
width: 120rpx;
height: 120rpx;
}
.list-detail {
margin: 10rpx 10rpx;
display: flex;
flex-direction: column;
width: 600rpx;
height: 220rpx;
}
.list-title text {
font-size: 11pt;
color: #333;
font-weight: bold;
}
.list-detail .list-tag {
display: flex;
height: 70rpx;
}
.list-tag .state {
font-size: 9pt;
color: #81aaf7;
width: 120rpx;
border: 1px solid #93b9ff;
border-radius: 2px;
margin: 10rpx 0rpx;
display: flex;
justify-content: center;
align-items: center;
}
.list-tag .join {
font-size: 11pt;
color: #bbb;
margin-left: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.list-tag .list-num {
font-size: 11pt;
color: #ff6666;
}
.list-info {
font-size: 9pt;
color: #bbb;
margin-top: 20rpx;
}
.bottom-line{
display: flex;
height: 60rpx;
justify-content: center;
align-items: center;
background-color: #f3f3f3;
}
- list.js
// pages/metting/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:['会议中','已完成','已取消','全部会议'],
"lists0": [
{
"id": "1",
"image": "/static/persons/1.jpg",
"title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】",
"num":"304",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "深圳市·南山区"
},
{
"id": "1",
"image": "/static/persons/2.jpg",
"title": "AI WORLD 2016世界人工智能大会",
"num":"380",
"state":"已结束",
"starttime": "2022-03-15 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/3.jpg",
"title": "H100太空商业大会",
"num":"500",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "大连市"
}
],
"lists1": [
{
"id": "1",
"image": "/static/persons/2.jpg",
"title": "AI WORLD 2016世界人工智能大会",
"num":"380",
"state":"已结束",
"starttime": "2022-03-15 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/3.jpg",
"title": "H100太空商业大会",
"num":"500",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "大连市"
},
{
"id": "1",
"image": "/static/persons/4.jpg",
"title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
"num":"150",
"state":"已结束",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/5.jpg",
"title": "新质生活 · 品质时代 2016消费升级创新大会",
"num":"217",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
}
],
"lists2": [
{
"id": "1",
"image": "/static/persons/4.jpg",
"title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
"num":"150",
"state":"已结束",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/5.jpg",
"title": "新质生活 · 品质时代 2016消费升级创新大会",
"num":"217",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
}
],
"lists3": [
{
"id": "1",
"image": "/static/persons/2.jpg",
"title": "AI WORLD 2016世界人工智能大会",
"num":"380",
"state":"已结束",
"starttime": "2022-03-15 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/3.jpg",
"title": "H100太空商业大会",
"num":"500",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "大连市"
},
{
"id": "1",
"image": "/static/persons/4.jpg",
"title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
"num":"150",
"state":"已结束",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
},
{
"id": "1",
"image": "/static/persons/5.jpg",
"title": "新质生活 · 品质时代 2016消费升级创新大会",
"num":"217",
"state":"进行中",
"starttime": "2022-03-13 00:00:00",
"location": "北京市·朝阳区"
}
],
"lists":[]
},
tap(e){
var index = e.detail.index;
var list ;
if(index == 0){
list=this.data.lists0;
}else if(index == 1){
list=this.data.lists1;
}else if(index == 2){
list=this.data.lists2;
}else{
list=this.data.lists3;
}
this.setData({
lists:list
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
投票管理
wxml:
<tabs tab-list="{{tabs}}" bindtabsChange="tap">
tabs>
<view class="view-container">
<view class="l1">
<view class="tp">
<image src="/static/tabBar/sdk.png"/>
view>
<view class="wt"><text>你最喜欢的车text>view>
view>
<view class="l2">
<view class="tx">
<image src="/static/persons/1.jpg"/>
view>
<view class="tx2">
<image src="/static/persons/2.jpg"/>
view>
view>
<view class="l1">
<view class="tp">
<image src="/static/tabBar/sdk.png"/>
view>
<view class="wt"><text>你最喜欢的车text>view>
view>
<view class="l2">
<view class="tx">
<image src="/static/persons/1.jpg"/>
view>
<view class="tx2">
<image src="/static/persons/2.jpg"/>
view>
view>
<view class="l1">
<view class="tp">
<image src="/static/tabBar/sdk.png"/>
view>
<view class="wt"><text>你最喜欢的车text>view>
view>
<view class="l2">
<view class="tx">
<image src="/static/persons/1.jpg"/>
view>
<view class="tx2">
<image src="/static/persons/2.jpg"/>
view>
view>
view>
wxss:
.view-container{
width : 750rpx;
height:180rpx;
background-color:#ffffff;
}
.l1{
height:80rpx;
background-color:#ffffff;
display:flex;
}
.view-container>view:nth-of-type(1){
margin-top:50px;
}
.tp>image{
width:70rpx;
height:70rpx;
}
.wt{
width:120px;
height:70rpx;
}
.wt>text{
height:70rpx;
display:flex;
align-items:center;
justify-content:center;
}
.l2{
width:750px;
height:250rpx;
display:flex;
}
.tx{
width:330rpx;
display:flex;
justify-content:center;
align-items:center;
}
.tx>image{
width:240rpx;
height:240rpx;
}
.tx2{
width:330rpx;
display:flex;
justify-content:center;
align-items:center;
}
.tx2>image{
width:240rpx;
height:240rpx;
}
个人中心
wxml:
<view class="view-container">
<view class="view-images">
<image src="/static/persons/1.jpg"/>
view>
<view class="view-nickname">昵称view>
<view class="view-help">设置view>
view>
<view class="row">
<view class="cell">
<view>
<image src="/static/tabBar/sdk.png"/>
view>
<view>我主持的会议view>
<view>1view>
<view>
<text>text>
view>
view>
<view class="cell">
<view>
<image src="/static/tabBar/sdk.png"/>
view>
<view>我参与的会议view>
<view>11view>
<view>
<text>text>
view>
view>
view>
<view class="row">
<view class="cell">
<view>
<image src="/static/tabBar/sdk.png"/>
view>
<view>我发布的投票view>
<view>10view>
<view>
<text>text>
view>
view>
<view class="cell">
<view>
<image src="/static/tabBar/sdk.png"/>
view>
<view>我参与的投票view>
<view>11view>
<view>
<text>text>
view>
view>
view>
<view class="row">
<view class="cell">
<view>
<image src="/static/tabBar/coding.png"/>
view>
<view>信息view>
<view>view>
<view>
<text>text>
view>
view>
<view class="cell">
<view>
<image src="/static/tabBar/component.png"/>
view>
<view>设置view>
<view>view>
<view>
<text>text>
view>
view>
view>
wxss:
page{
background-color:darkgray;
}
.view-container{
width : 750rpx;
height:180rpx;
background-color:#ffffff;
display:flex;
}
.view-images{
width:220rpx;
display:flex;
justify-content: center;
align-items:center;
}
.view-images>image{
width:180rpx;
height:180rpx;
border-radius:0.6em;
}
.view-nickname{
width:380rpx;
display:flex;
align-items: center;
}
.view-help{
display:flex;
align-items: center;
}
.row{
margin-top:15px;
height:300rpx;
background-color:#ffffff;
}
.cell{
height:150rpx;
display:flex;
}
.cell:nth-of-type(1){
border-bottom:1px solid #cccccc;
}
.cell>view:nth-of-type(1){
width:100rpx;
display:flex;
justify-content:center;
align-items:center;
}
.cell>view:nth-of-type(1)>image{
width:70rpx;
height:70rpx;
}
.cell>view:nth-of-type(2){
width:520rpx;
display:flex;
align-items: center;
}
.cell>view:nth-of-type(3){
width:40rpx;
display:flex;
align-items: center;
}
.cell>view:nth-of-type(4){
display:flex;
align-items:center;
}
.cell>view:nth-of-type(4)>text{
width: 7px;
height: 7px;
border-width: 1px;
border-color: rgb(136, 136, 136);
border-style: none solid solid none;
transform: rotate(315deg);
}