接龙小程序布局教程

第一次进来是首页没有数据的页面。

<image src="http://9i0i.com/pic.php?p=../images/logo.png" class="logo"></image>

暂时没有登记记录哦~n点击下方按钮创建报名接龙

+ 发起报名

首次进入有提示添加小程序的图片。
.first-tips {
width: 300rpx;
height: 128rpx;
position: fixed;
right: 59rpx;
}
.no-body{
width: 750rpx;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
}
然后看logo摆放位置，给一个距离顶部的位置就可以了
.logo{
width: 170rpx;
height: 170rpx;
margin-top: 181rpx;
}
下面就是文字了，居中，他的内部元素也居中，设置字体及颜色。
.logo_text{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 24rpx;
margin-top: 65rpx;
letter-spacing: 5rpx;
color: #aaaaaa;
}
最下面的是添加按钮，居中，设置背景颜色。
.btn{
font-size: 34rpx;
position: fixed;
bottom: 80rpx;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 380rpx;
height: 100rpx;
background-color: #39affc;
border-radius: 50rpx;
}
以上是无数据的首页。
下面开始介绍有数据的首页。

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

  <view class="list-item" wx:for="{{list}}">     <view class="item-top index-list-item-view-between">       <view class="item-avatar">         <open-data type="userAvatarUrl"></open-data>       </view>       <text class="item-nickname">发起人:AAA</text>       <text class="item-date">2020.02.02 20:20</text>     </view>     <view class="index-list-item-view-between">       <text class="item-label">活动</text>       <text class="item-name">同学聚会报名</text>       <image class="item-delete" src="http://9i0i.com/pic.php?p=../images/btn-del.png"></image>     </view>     <text class="item-content">BBBBBB</text>     <view class="index-list-item-view-between item-view-people">       <view class="item-people">         <image style="width: 24rpx; height: 24rpx" src="http://9i0i.com/pic.php?p=../images/btn-icon.png"></image>         <text class="item-people-num">50人</text>       </view>       <image class="item-share" src="http://9i0i.com/pic.php?p=../images/btn-share.png"></image>     </view>   </view> </view>

这里主要是放上了一个数据列表，都是写死的数据。用for循环填充数据，有正式数据需要把写死的数据删掉。
.data-view {
width: 100%;
padding-bottom: 28rpx;
}

.list-item {
background-color: white;
padding-left: 30rpx;
padding-bottom: 18rpx;
padding-right: 30rpx;
margin-top: 6rpx;
}

.item-top {
padding-bottom: 27rpx;
padding-top: 18rpx;
}

.item-avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
overflow: hidden;
}

.item-nickname {
position: absolute;
margin-left: 72rpx;
font-size: 26rpx;
color: #333333;
}

.item-date {
font-size: 26rpx;
color: #aaaaaa;
}

.item-label {
padding-left: 9rpx;
padding-right: 9rpx;
padding-top: 7rpx;
padding-bottom: 7rpx;
background-color: #68dcf5;
border-radius: 10rpx;
font-size: 26rpx;
color: #ffffff;
}

.item-name {
margin-left: 78rpx;
position: absolute;
font-size: 38rpx;
color: #333333;
}

.item-delete {
width: 34rpx;
height: 36rpx;
}

.item-content {
position: relative;
top: 21rpx;
color: #aaaaaa;
font-size: 30rpx;
}

.item-view-people {
margin-top: 30rpx;
}

.item-share {
width: 120rpx;
height: 50rpx;
}

.item-people-num {
font-size: 26rpx;
color: #cccccc;
}
创建接龙，点击跳转，绑定按钮bindtap
编写页面

<text style=" flex-shrink: 0;">活动报名</text> <input placeholder="请选择" placeholder-class="placeholder" style="height:98rpx;" class="input" disabled="false"></input> <text class="iconfont icon-down-arrow" style="color:#39affc;margin-right:10rpx"></text>

<text style=" flex-shrink: 0;">活动主题</text>  <input placeholder="（例：同学聚会报名）" placeholder-class="placeholder" style="height:98rpx;" class="input" ></input> 

填写备注信息： <textarea placeholder="例：毕业10周年聚会定于3月12日在国际酒店举行，请同学接龙报名。" placeholder-class="placeholder"   class="remarks-input"></textarea>

<view class="btn-cancel">取消</view> <view class="btn-sumbit">确认发起</view>

*要求参与接龙者必填姓名，选填电话号码、备注。

/ pages/add/add.wxss /
.body {
width: 750rpx;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}

.avatar {
width: 140rpx;
height: 140rpx;
border-radius: 70rpx;
overflow: hidden;
margin-top: 30rpx;
}

.input-border {
border: solid 1rpx #cccccc;
width: 640rpx;
box-sizing: border-box;
}

.activity {
height: 100rpx;
font-size: 30rpx;
color: #333333;
display: flex;
align-items: center;
padding-left: 30rpx;

}

.placeholder {
font-size: 30rpx;
color: #cccccc;
}

.input {
width: 100%;
padding-left: 10rpx;
padding-right: 10rpx;
}

.remarks {
height: 260rpx;
margin-top: 20rpx;
padding-left: 30rpx;
padding-top: 30rpx;
padding-right: 30rpx;
font-size: 30rpx;
color: #333333;
}

.remarks-input {
margin-top: 20rpx;
height: 160rpx;
}

.btn-group {
display: flex;
width: 100%;
justify-content: center;
margin-top: 100rpx;
}

.btn-cancel {
width: 310rpx;
height: 100rpx;
background-color: #e5e5e5;
border-radius: 50rpx;
color: white;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10rpx;
}

.btn-sumbit {
width: 310rpx;
height: 100rpx;
background-color: #39affc;
margin-left: 10rpx;
border-radius: 50rpx;
color: white;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;

}

.bottom-desc {
font-size: 26rpx;
margin-top: 40rpx;
color: #999999;
}

page {
background-color: white;
}
一个简单的小程序首页就做好了。

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)