今天给大家带来黑色背景打卡项目添加列表样式,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container_change">
<view>
<image src="../../images/back.png" mode="aspectFit"></image>
</view>
<view class="task_name">
<text class="task_nameF">速图一小时打卡</text>
<view class="task_leader">
<image class="leader_pic" src="../../images/per.png"></image>
<text class="leader_name">段泥马</text>
</view>
</view>
<view class="task_team">
<view class="task_teamWrap">
<text class="teamtext">· 同行的小伙伴们</text>
<scroll-view class="members" scroll-x="ture">
<view class="mem_list">
</view>
</scroll-view>
</view>
</view>
<view class="task_des">
<view class="des_wrap">
<view class="huo">
<text>. 活动简介</text>
</view>
<view class="des_content">
<text >为了加快各位大触的。。。。。</text>
</view>
</view>
</view>
</view>
|
二、wxss样式文件代码如下:
/* pages/task_context/task_context.wxss */
.container_change{
height: 100%;
width: 100%;
display: block;
padding: 0rpx 0;
box-sizing: border-box;
background-color: #1d1128;
}
image{
width:750rpx;
display: block;
}
.task_name{
height: 120rpx;
width:100%;
background-color: #261a31;
margin-top:-10rpx;
color: white;
font-family: microsoft yahei;
align-items: center;
}
.task_nameF{
float:left;
margin-left:140rpx;
margin-top:30rpx;
}
.leader_name{
float:left;
margin-top: 32rpx;
margin-left: 10rpx;
font-size: 12pt;
}
.leader_pic{
margin-top: 40rpx;
margin-left: 70rpx;
float:left;
width: 30rpx;
height: 32rpx;
}
.task_team{
height: 230rpx;
width:100%;
background-color: #261a31;
margin-top:10rpx;
color: white;
font-family: microsoft yahei;
}
.task_teamWrap{
margin-top:20rpx;
float:left;
margin-left:70rpx;
}
.teamtext{
float:left;
font-size: 11pt;
}
.task_des{
height: 180rpx;
width:100%;
background-color: #261a31;
margin-top:10rpx;
color: white;
font-family: microsoft yahei;
font-size: 11pt;
}
.des_wrap{
margin-top:20rpx;
float:left;
margin-left:70rpx;
}
.des_content{
margin-left:15rpx;
margin-top:20rpx;
}
|
三、js页面代码如下:
// pages/task_context/task_context.js
Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|