微信小程序抖音实战-首页（上）

抖音.png

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

首先看下效果图

抖音首页

一、布局抖音图片

<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的支持怎么能行呢？

更多精彩内容

微信小程序电商实战-入门篇
微信小程序电商实战-首页（上）
微信小程序电商实战-首页（下）
微信小程序电商实战-商品详情（上）
微信小程序电商实战-商品详情加入购物车（下）
微信小程序电商实战-商品列表流式布局
微信小程序实战篇：基于wxcharts.js绘制移动报表
微信小程序实战篇：实现抖音评论效果

关注我们

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

IT实战联盟.jpg