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

软件老王 2018-05-22 17:10:07 ⋅ 91 阅读



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

首先看下效果图


一、布局抖音图片

<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实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~





全部评论: 0

    我有话说:

    程序实战-(下)

    程序动态数据获取

    程序电商实战-

    一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看长什么样吧!   效果图

    程序电商实战-(下)

    一篇:程序电商实战-)好了,一期我们把搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实战篇:实现评论效果

    我们在写程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个评论效果的程序......

    程序实战-视频弹幕

    如果你去只是为了看视频就少了一大乐趣,评论区才是最有趣的地方,边看视频边看评论的弹幕是不是更有意思

    程序电商实战-商品详情(

    先看一下今天要实现程序商品详情吧!

    程序商城(四):动态API实现商品详情

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序商城(三):电商福利专场无限下拉刷新动态API数据实现

    电商第5个模块-福利专场,通过https调用API数据模型来实现无限下拉刷新......

    程序电商实战-购物车(

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序的商品详情,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序实战篇:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!