樣式集（五）微信朋友圈樣式模擬

效果圖：

小圖標：

源碼：

<!--pages/findList/findList.wxml-->
<image class="xxiangji" catchtap="xxiangji" src="/images/xxiangji.png"></image>
<image class="top_img" src="/images/settle.jpg"></image>
<view class="userinfo-avatar">
	<open-data type="userAvatarUrl"></open-data>
</view>
<view class="userNickName">
	<open-data type="userNickName"></open-data>
</view>

<view class="centent" wx:for='{{list}}' wx:key="">
	<view class="item">
		<image class="head" src="/images/icon-huodao-selected.png"></image>
		<view style="width:90%">
			<view class="name">陸斌</view>
			<image class="img" mode="widthFix" src="/images/11t.jpg"></image>
			<view class="">

				<view class="tanchuang" wx:if='{{tanchuang_show}}' animation="{{animationData}}">
					<view class="p_r" catchtap="">
						<image class="aixin" mode="widthFix" src="/images/aixin1.png"></image>
						<view>{{a?'取消':'點贊'}}</view>
					</view>
					<view class="p_r" catchtap="up_comment">
						<image class="pinglun" mode="widthFix" src="/images/pinglun.png"></image>
						<view>評論</view>
					</view>
				</view>

				<image class="comment" catchtap="show_tanchuang" src="/images/pl_icon.jpg"></image>
				<view class="time">14分鐘前</view>

				<view class="pl_block">
					<view class="ax_item">
						<image class="aixin2" mode="widthFix" src="/images/aixin2.png"></image>
						<view class="ax_name">a_靖</view>
					</view>
					<view class="pl_item">
						<view class="pl_name">a_靖: <text>高考加油</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>

wxss

/* pages/findList/findList.wxss */
page{
  background-color: white;
}
.top_img{
  width: 100%;
  height: 480rpx;
}
 
.userinfo-avatar {
  overflow:hidden;
  display: block;
  position: absolute;
  right: 12rpx;
  top: 330rpx;
  width: 130rpx;
  height: 130rpx;
  border-radius: 12rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
 
.userNickName {
  /* color: #fff; */
  font-size: 32rpx;
  color: white;
  border-radius:40%;
  position: absolute;
  right: 192rpx;
  top: 420rpx;
}
.xxiangji{
  position: fixed;
  right: 36rpx;
  top: 36rpx;
  width: 60rpx;
  height: 60rpx;
  z-index: 999;
}
.centent{
  margin-top: 100rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #f2f2f2;
}
.head{
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin: 16rpx;
}
.item{
  display: flex;
  flex-direction: row;
}
.name{
 font-size: 32rpx;
 /* font-weight: 600; */
 color: #546689;
 margin-top: 20rpx;
}
.img{
  width:220rpx;
  margin-top: 20rpx;
  border-radius: 4rpx;
}
.time{
  font-size: 26rpx;
  color: #999;
  margin-top: 30rpx;
  margin-bottom: 20rpx;
}
.comment{
  background-color: #F7F8F8;
  color: #546689;
  font-size: 60rpx;
  border-radius: 8rpx;
  width: 70rpx;
  height: 40rpx;
  position: absolute;
  right: 30rpx;
  line-height: 35rpx;
  text-align: center;
}
.tanchuang{
  display: flex;
  flex-direction: row;
  background-color: #484848;
  border-radius: 8rpx;
  position: absolute;
  right: 112rpx;
  line-height: 80rpx;
  height: 80rpx;
  margin-top: -20rpx;
  color: white;
  width: 360rpx;
  font-size: 28rpx;
}
.aixin{
  width: 42rpx;
  margin-top: 20rpx;
  margin-left: 40rpx;
  margin-right: 10rpx;
}
.pinglun{
  width: 42rpx;
  margin-top: 20rpx;
  margin-left: 70rpx;
  margin-right: 10rpx;

}
.aixin2{
  width: 32rpx;
  margin-top: 20rpx;
  margin-left: 40rpx;
  margin-right: 10rpx;
}
.ax_item{
  border-bottom: 1px solid #f2f2f2;
  display: flex;   flex-wrap:wrap
}
.ax_name{
  height: 70rpx;
  line-height: 70rpx;
}
.pl_block{
  background-color: #F7F7F7;
  border-radius: 8rpx;
  width: 95%;
  margin-top: 30rpx;
  color: #546689;
}
.pl_item{
  display: flex;   flex-wrap:wrap
}
.pl_name{
  height: 70rpx;
  line-height: 70rpx;
  margin-left: 40rpx;
  margin-right: 10rpx;
}
.pl_name text{
  color: black;
}

js

// pages/findList/findList.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tanchuang_show:false,
    list:[1,1,1],
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },
  xxiangji(){
    wx.showActionSheet({
      itemList: ['發佈圖文', '發佈視頻'],
      success (res) {
        console.log(res.tapIndex)
        if(res.tapIndex==0){

        }else{

        }
      },
      fail (res) {
        console.log(res.errMsg)
      }
    })
  },
  show_tanchuang(){
    var tanchuang_show=!this.data.tanchuang_show
    this.setData({
      tanchuang_show
    })
  },
})