微信小程序仿微信功能Day2

仿微信首页点击列表跳转内容聊天部分

通过Day1的js，我们为列表添加了跳转事件，并绑定了列表的值。
不懂得看上一篇：微信小程序仿微信功能Day1
图片资源文件：网盘链接 提取码：en17

1. Details.js

click:function(event){
    var index=event.currentTarget.dataset.key;
    // console.log(index)
     wx.navigateTo({
       url: '/pages/PersonalDetails/PersonalDetails?index='+index
     })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var index1=options.index;
    // console.log(index1)
    var list=getApp().globalInformation;
    this.setData({
      arr:list[index1]
    })
    var title=list[index1].name;
    wx.setNavigationBarTitle({
      title:title
    })
  },

2.Details.wxml

<!-- pages/Details/Details.wxml -->
<view class="external">
  <view class="box">
    <image src="{{arr.img}}" bind:tap="click" data-key="{{arr.id}}" />
    <view class="text-box">
      <view class="text-box-left"></view>
      <text>{{arr.wechatname}}</text>
    </view>
  </view>
  <view class="box1" bind:tap="click">
    <image src="/image/1.jpg" />
    <view class="text-box">
      <view class="text-box-right"></view>
      <text>你好！</text>
    </view>
  </view>
</view>
<view class="bottom-box">
  <image src="/image/details/语音.png" />
  <view class="textbox"></view>
  <image src="/image/details/表情.png" />
  <image src="/image/details/更多.png" />
</view>

3.Details.wxss

/* pages/Details/Details.wxss */
.external {
  width: 87%;
  padding: 50rpx;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 80rpx;
}
.box1{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 80rpx;
}

image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 5%;
}

.external .box .text-box {
  position: relative;
  margin-left: 30rpx;
  display: inline-block;
  background-color: #EDEDED;
  padding: 18rpx;
  border-radius: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.external .box1 .text-box {
  position: relative;
  margin-right: 30rpx;
  display: inline-block;
  background-color: #9EEA6A;
  padding: 18rpx;
  border-radius: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.external .box .text-box-left{
  position:absolute;  
  bottom:25rpx;  
  left:-20rpx;  
  width:0;  
  height:0;  
  border-top:30rpx solid transparent;  
  border-bottom:30rpx solid transparent;  
  border-right:30rpx solid #ededed;
}
.external .box1 .text-box-right{
  position:absolute;  
  bottom:25rpx;  
  right:-20rpx;  
  width:0;  
  height:0;  
  border-top:30rpx solid transparent;  
  border-bottom:30rpx solid transparent;  
  border-left:30rpx solid #9EEA6A; 
}

.external .box1 .text-box text {
  font-size: 26rpx;
}
.external .box .text-box text {
  font-size: 26rpx;
}

/* bottom----- */

.bottom-box{
  width: 100%;
  height: 100rpx;
  background-color: #EDEDED;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom-box image{
  width: 60rpx;
  height: 60rpx;
}
.bottom-box .textbox{
  width: 65%;
  height: 70rpx;
  background-color: #ffffff;
  border-radius: 5%;
}