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

抖音.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

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 22,318评论 19 289
  • 谈话唠嗑,说起自己的男人,我们都各有话说,不一而足,老公是自己的,自己知道。 说起挣钱养家,在家做家务,男人该不该...
    静默根系520阅读 30评论 0 0
  • 与书结缘,年头不少,其间欣欣然有之,悻悻然亦有之。书海无涯,回首其间因缘种种,如人饮水,冷暖自知。现略述一二,以自...
    乐呵呵1379阅读 199评论 3 6
  • 今晚,弟弟微信告诉我,他调岗了,从新疆公司调到济南公司。我第一反应这是好事,弟弟的回答是,听某某和某某说,济南那边...
    橙子律师阅读 148评论 0 0
  • 每个人都想要成功,可是要成功就必须付出一定的努力,要成功就必须不怕失败。而我,终于还是做到了,我克服了困难...
    木木_1649阅读 16评论 0 0