微信小程序【练手小页面】

于 2023-01-30 20:32:52 发布
阅读量478 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Java 面对对象 文章标签： 微信小程序 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63719049/article/details/128808224

会议管理

自定义tabs组件

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

  • tabs.json
{
  "component": true,
  "usingComponents": {}
}
  • 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
      })
    }
  }
})

会议管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v1vK4fXY-1675081152333)(images/会议管理.png)]

  • list.json
{
    "usingComponents": {
      "tabs":"/components/tabs/tabs"
    }
}
  • list.wxml
<tabs tab-list="{{tabs}}" bindtabsChange="tap">
</tabs>
<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.location}}</text>|<text>{{item.starttime}}</text></view>
        </view>
    </view>
</block>
  • 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() {

  }
})

投票管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eh9lLXeq-1675081152349)(images/投票管理.png)]
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;
}

个人中心

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ErBf4RN-1675081152355)(images/个人中心.png)]

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>1</view>
  <view>
   <text></text>
  </view>
  </view>

  <view class="cell">
  <view>
    <image src="/static/tabBar/sdk.png"/>
  </view>
  <view>我参与的会议</view>
  <view>11</view>
  <view>
   <text></text>
  </view>
  </view>
</view>

<view class="row">
  <view class="cell">
  <view>
    <image src="/static/tabBar/sdk.png"/>
  </view>
  <view>我发布的投票</view>
  <view>10</view>
  <view>
   <text></text>
  </view>
  </view>

  <view class="cell">
  <view>
    <image src="/static/tabBar/sdk.png"/>
  </view>
  <view>我参与的投票</view>
  <view>11</view>
  <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);
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值