微信小程序仿微信功能Day1

项目主页预览 1.首先加入下方的4个tabbar

在app.json中加入全局配置。 图标： 目录结构

全局都是写死的数据，所以直接贴出代码。 首页代码： 1.test.wxml

<!-- pages/test/test.wxml -->
<!-- <view wx:for="{
         
  {arr}}" wx:for-item="i">
  <text wx:for="{
         
  {arr}}" wx:for-item="j">
    <text wx:if="{
         
  {i>=j}}">{
         
  {j}}*{
         
  {i}}={
         
  {i*j}}</text>
  </text>
</view> -->
<!-- <image src="/image/beijin.png" mode="aspectFill" /> -->
<view class="box" style="{
         
  {bdcolor}}" wx:for="{
         
  {array}}" wx:for-item="arritem" wx:for-index="arrindex" data-key1="{
         
  {arrindex}}"  bindtap="click">
  <view class="tx">
    <view class="tx-dot" wx:if="{
         
  {arritem.dot>0}}">
      <text wx:if="{
         
  {arritem.dot>1&&arritem.dot<=99}}" class="tx-dot-1">{
         
  {arritem.dot}}</text>
      <text wx:if="{
         
  {arritem.dot>99}}" class="tx-dot-99">99+</text>
    </view>
    <!-- <block wx:if="{
         
  {arrindex%2==0}}" wx:for="{
         
  {imgUrl}}" wx:for-item="imgurl">
      <image src="{
         
  {imgurl}}" />
    </block> -->
    <block>
      <image src="{
         
  {arritem.imgurls}}" class="img-1" />
    </block>
  </view>
  <view class="box1">
    <text class="time">{
         
  {arritem.time}}</text>
    <text class="text1">{
         
  {arritem.text1}}</text>
    <text class="text2">{
         
  {arritem.text2}}</text>
  </view>
</view>

2.text.js

3.text.wxss

/* pages/test/test.wxss */
.box{
  width: 100%;
  margin: 0 auto;
  border-bottom:2rpx solid	#D3D3D3;
  display: flex;
  flex-direction: row;
  padding: 25rpx 25rpx;
}
.box1{
  width: 580rpx;
  overflow: hidden;
  position: relative;
}
.box1 .time{
  color: #B0B0B0;
  position: absolute;
  right: 0rpx;
  line-height: 60rpx;
  font-size: 26rpx;
}
.box .tx{
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 5%;
  background-color: #DADFDE;
  margin-right: 20rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}
.box:nth-of-type(2n){
  background-color: rgba(237,237,237, .6);
}
.box .tx .img-1{
  width: 100%;
  height: 100%;
}
.box .tx image{
  width: 30rpx;
  height: 30rpx;
  border-radius: 5%;
}
.box .tx .tx-dot{
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  text-align: center;
  color: white;
  font-size: 18rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .tx .tx-dot .tx-dot-99{
  font-size: 15rpx;
}
.box .text1{
  display: block;
  color: black;
  font-weight: bold;
  font-size: 26rpx;
  line-height: 60rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box .text2{
  display: block;
  color: #B0B0B0;
  font-size: 20rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}