教大家用微信小程序编写一个抖音，本节主要是抖音首页的布局及样式
首先看下效果图
一、布局抖音图片
<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="{{current}}"，图片模式改为 mode='aspectFill' 这样对那些尺寸不规则的就可以有个较好的展示效果
二、布局右侧功能区
<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>三、布局底部描述和发布按钮
<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>第一个是刷新按钮，第二个是发布抖音时留的内容，第三个是发布按钮
四、隐藏的评论功能
<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>评论区分三个区域，整体的透明背景，上面半透明可点击区域，下面弹出的评论列表
五、完整样式
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的支持怎么能行呢？
更多精彩内容
关注我们
如果需要源码可以关注“IT实战联盟”公众号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~
注意：本文归作者所有，未经作者允许，不得转载
