logo头像
Snippet 博客主题

微信小程序抖音实战-首页(上)

教大家用微信小程序编写一个抖音,本节主要是抖音首页的布局及样式

首先看下效果图

一、布局抖音图片

1
2
3
4
5
6
7
<swiper duration="{{duration}}" vertical="true" bindchange="changeSubject" current="{{current}}" class='swiper'>
<block wx:for="{{subjectList}}" wx:key="*this">
<swiper-item>
<image src="{{item.coverUrl}}" mode='aspectFill' class="slide-image" />
</swiper-item>
</block>
</swiper>

主要使用了swiper 的一个轮播效果,设置为上下滚动(vertical=”true”),绑定轮播事件bindchange=”changeSubject”,获取当前轮播图位置 current=”“,图片模式改为 mode=’aspectFill’ 这样对那些尺寸不规则的就可以有个较好的展示效果

二、布局右侧功能区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<view class="tools">
<view>
<image class="userinfo-avatar" src="{{subject.avatarUrl}}"></image>
</view>
<view>
<image wx:if="{{subject.like}}" class="icon right-icon" src='/image/like_red.png' bindtap='like'>喜欢</image>
<image wx:if="{{!subject.like}}" class="icon right-icon" src='/image/like.png' bindtap='like'>喜欢</image>
<view class="text" bindtap='like'>{{subject.likes}}</view>
</view>
<view>
<image class="icon right-icon" src='/image/talk.png' bindtap='talk'>评论</image>
<view class="text" bindtap='apply'>{{subject.talks}}</view>
</view>
<view>
<image class="icon right-icon" src='/image/share.png' bindtap='share'>分享</image>
<view class="text">{{subject.shares}}</view>
</view>
</view>

三、布局底部描述和发布按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<view class="reload">
<view>
<image class="icon" src='/image/reload.png' bindtap='reload'></image>
</view>
</view>

<view class="desc">
<view>
<text class="desc-text">{{subject.title}}</text>
</view>
</view>

<view class="footer">
<view class='apply'>
<image class="icon" src='/image/add.png' bindtap='apply'></image>
</view>
</view>

第一个是刷新按钮,第二个是发布抖音时留的内容,第三个是发布按钮

四、隐藏的评论功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<view class='talks-layer' animation='{{talksAnimationData}}'>
<view class='layer-white-space' bindtap='hideTalks'>
</view>
<view class='talks'>
<view class='talk-header'>
<view class='talk-count'>{{subject.talks}} 条评论</view>
<image src='/image/close.png' class='talk-close' bindtap='hideTalks'></image>
</view>

<scroll-view class='talk-body' scroll-y="true" bindscrolltolower="onScrollLoad">
<view class='talk-item' wx:for="{{talks}}" wx:key="*this">
<view class='talk-item-left'>
<image class='talk-item-face' src='{{item.avatarUrl}}'></image>
</view>
<view class='talk-item-right'>
<text class='talk-item-nickname'>{{item.nickName}}</text>
<text class='talk-item-content'>{{item.content}}</text>
<text class='talk-item-time'>{{item.talkTime}}</text>
</view>
</view>
</scroll-view>

<view class='talk-footer'>
<input class='talk-input' type='text' bindinput='talkInput' bindconfirm='talkConfirm' placeholder='有爱评论,说点儿好听的~' value='{{inputTalk}}'></input>
</view>
</view>
</view>

评论区分三个区域,整体的透明背景,上面半透明可点击区域,下面弹出的评论列表

五、完整样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
page {
height: 100%;
overflow: hidden;
}

.swiper {
height: 100%;
}

.slide-image {
width: 100%;
height: 100%;
}

.reload {
position: absolute;
left: 5rpx;
top: 10rpx;
height: 100px;
}

.tools {
display: flex;
position: absolute;
right: 5rpx;
top: 250rpx;
height: 300px;
flex-direction: column;
}

.userinfo-avatar {
width: 100rpx;
height: 100rpx;
margin: 20rpx;
border-radius: 50%;
}

.icon {
width: 100rpx;
height: 100rpx;
}

.right-icon {
margin: 20rpx 20rpx 0rpx;
}

.text {
color: white;
width: 100rpx;
text-align: center;
margin: 0rpx 20rpx;
}

.desc {
position: absolute;
left: 20rpx;
bottom: 158rpx;
width: 600rpx;
}

.desc-text {
color: white;
white-space: pre-line;
}

.footer {
position: absolute;
bottom: 10rpx;
width: 100%;
}

.apply {
position: relative;
margin: 0 auto;
width: 100rpx;
color: #ff2c37;
}

/* 框架 */

.talks-layer {
position: absolute;
bottom: -100%;
height: 0;
width: 100%;
overflow: hidden;
/* background-color: blue; */
}

.layer-white-space {
height: 100%;
width: 100%;
/* background-color: green; */
}

.talks {
position: absolute;
height: 900rpx;
width: 100%;
bottom: 0rpx;
background-color: #2f2d2e;
border-top-left-radius: 5%;
border-top-right-radius: 5%;
/* background-color: red; */
}

.talk-header {
width: 100%;
height: 70rpx;
padding-top: 30rpx;
text-align: center;
}

.talk-body {
height: 700rpx;
}

.talk-footer {
position: absolute;
bottom: 0rpx;
width: 100%;
height: 100rpx;
background-color: #151515;
}

/* 顶部元素 */

.talk-count {
font-size: 0.8rem;
height: 40rpx;
color: #6b696a;
}

.talk-close {
position: absolute;
top: 40rpx;
right: 40rpx;
width: 40rpx;
height: 40rpx;
}

/* 中部元素 */

.talk-item {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
color: white;
}

.talk-item-left {
display: flex;
flex-direction: row;
margin: 20rpx 30rpx;
}

.talk-item-face {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}

.talk-item-right {
width: 100%;
border-bottom: solid 1rpx #6a6869;
margin-right: 30rpx;
margin-bottom: 30rpx;
}

.talk-item-nickname {
font-size: 0.7rem;
color: #aaa8a9;
margin-top: 20rpx;
margin-bottom: 10rpx;
}

.talk-item-content {
display: block;
margin-right: 30rpx;
width: 100%;
white-space: pre-line;
}

.talk-item-time {
font-size: 0.7rem;
color: #6a6869;
margin-bottom: 20rpx;
}

/* 底部元素 */

.talk-input {
width: 100%;
padding: 20rpx 40rpx;
color: white;
border-top-left-radius: 5%;
border-top-right-radius: 5%;
}

预告: 没有数据API的支持怎么能行呢?

####更多精彩内容
微信小程序电商实战-入门篇
微信小程序电商实战-首页(上)
微信小程序电商实战-首页(下)
微信小程序电商实战-商品详情(上)
微信小程序电商实战-商品详情加入购物车(下)
微信小程序电商实战-商品列表流式布局
微信小程序实战篇:基于wxcharts.js绘制移动报表
微信小程序实战篇:实现抖音评论效果

####关注我们
如果需要源码可以关注“IT实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~

上一篇