正文详情

今天给大家带来带图片简单的活动介绍,制作好以后效果图如下:


一、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(){

// 页面关闭

}

})

微信小程序带图片简单的活动介绍样式模板制作设计下载

发布时间:10-09 19431
您可能在找这些