微信小程序仿微信功能Day1

仿微信主页列表的显示

项目主页预览

1.首先加入下方的4个tabbar

"tabBar": {
    "color": "#000000",
    "selectedColor": "#08BF62",
    "backgroundColor": "#F7F7F7",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/test/test",
        "text": "首页",
        "iconPath": "image/微信.png",
        "selectedIconPath": "image/微信 (1).png"
      },
      {
        "pagePath": "pages/phone/phone",
        "text": "通讯录",
        "iconPath": "image/通讯录.png",
        "selectedIconPath": "image/通讯录(1).png"
      },
      {
        "pagePath": "pages/find/find",
        "text": "发现",
        "iconPath": "image/发现.png",
        "selectedIconPath": "image/发现 (1).png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我",
        "iconPath": "image/me.png",
        "selectedIconPath": "image/me1.png"
      }
    ]
  },

在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

// pages/test/test.js
Page({
  click: function (event) {
    var index = event.currentTarget.dataset.key1;
    // console.log(index)
    wx.navigateTo({
      url: '/pages/Details/Details?index=' + index
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    array: [
      {
        id: 0,
        imgurls: "/image/2.jpg",
        dot: 0,
        time: "19:10",
        text1: "中外美术鉴赏2020年春季中外美术鉴赏2020年春季中外美术鉴赏2020年春季",
        text2: "座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师",

      },
      {
        id: 1,
        imgurls: "/image/3.jpg",
        dot: 100,
        time: "17:20",
        text1: "内蒙古电子-微信小程序工匠",
        text2: "李勇忠:本学期所有办理贷",

      },
      {
        id: 2,
        imgurls: "/image/4.jpg",
        dot: 1,
        time: "15:18",
        text1: "软件与大数据男生宿舍长",
        text2: "未请31期19位新发展预备党员们,现在",

      },
      {
        id: 3,
        imgurls: "/image/5.jpg",
        dot: 99,
        time: "15:16",
        text1: "蒙古服饰",
        text2: "王旭:博物馆的",

      },
      {
        id: 4,
        imgurls: "/image/6.png",
        dot: 0,
        time: "昨天",
        text1: "31期发展对象",
        text2: "云计算181赵磊:收到",

      },
      {
        id: 5,
        imgurls: "/image/wx.png",
        dot: 2,
        time: "8月15日",
        text1: "文件传输助手",
        text2: "[图片]",

      },
      {
        id: 6,
        imgurls: "/image/8.png",
        dot: 1,
        time: "6月12日",
        text1: "项目辅导群",
        text2: "置888",


      },
      {
        id: 7,
        imgurls: "/image/10.png",
        dot: 0,
        time: "5月28日",
        text1: "好朋友",
        text2: "[图片]",

      }
    ]
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.startPullDownRefresh()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.hideTabBarRedDot({
      index: 0
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (e) {
   
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

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;
}