ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序 仿微信朋友圈

2022-02-08 10:31:08  阅读:138  来源: 互联网

标签:微信 height content 朋友圈 background left 仿微信 margin view


 

 

<scroll-view class='page'>
  <!-- 列表 -->
  <view class='CircleList' wx:for='{{DataSource}}'>
    <!-- 头像、昵称、内容 -->
    <view class='body-view'>
      <!-- 头像 -->
      <view class='left-view'>
        <image class='user-icon' src='{{item.icon}}'></image>
      </view>
      <view class='right-view'>
        <!-- 昵称 -->
        <view class='user-name-view'>
          <label class='user-name'>我的名字</label>
        </view>
        <!-- 内容 -->
        <view class='user-content-view'>
          <text class='user-content'>{{item.content}}</text>
        </view>
        <!-- 图片 -->
        <view class='photo-view'>
        
            <image class='photo' bindtap='LookPhoto' wx:for='{{item.resource}}' data-list="{{item.resource}}" wx:for-item="dImg" data-photUrl='{{dImg}}' src='{{dImg}}' style='width:{{photoWidth}}px;height:{{photoWidth}}px'></image>
        
        </view>
        <!-- 地理位置 -->
        <view class='user-address-view'>
          <label>长沙市天心区芙蓉南路四段158号地理信息产业园总部基地A座9楼</label>
        </view>

        <!-- 时间、删除按钮、点赞评论按钮 -->
        <view class='TDD-view'>
          <label>2018-07-25 10:14:23</label>
          <button bindtap='delete'>删除</button>
          <image data-isShow='{{isShow}}' bindtap='TouchDiscuss' src='/images/wxdiscuss.png'></image>
        </view>

        <!-- 点赞 -->
        <view class='zan-view'>
          <view class='trigon-view'>
            <image mode='aspectFill' class='trigon' src='/images/trigon.png'></image>
          </view>

          <!-- 点赞 -->
          <view class='zan-bg-view'>
            <view class='zan-user-view' wx:for='{{item.zanSource}}'>
              <label bindtap='TouchZanUser' data-name='{{item}}' class='zan-user'>{{item}},</label>
            </view>
          </view>
          <view class='line'></view>
          <!-- 评论 -->
          <view class='discuss-view'>
            <view class='discuss' wx:for='{{item.contnet}}'>
              <label bindtap='TouchZanUser' data-name='{{item.firstname}}' class='discuss-user'>{{item.firstname}}:</label>
              <label class='content'>{{item.content}}</label>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</scroll-view>
// pages/CircleFriends/CircleFriends.js
var app = getApp()
var that

Page({
  /**
   * 页面的初始数据
   */
  data: {
    DataSource: [{
    icon: 'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
    content: '我大学毕业到一家集团公司的办公室当文员。办公室主任有一特长,即文章写得好,很有思想,公司董事长很器重他,董事长的讲话稿和企业的年终总结等一系列重大文章都是出自他的手笔。',
    resource: ['https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
      'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
      'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
      'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
      'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b'
    ],
    zanSource: ['张三', '李四', '王五', '找钱', '孙俪', '王宝'],
    contnet: [{
        'firstname': '张三',
        'content': '你好漂亮呀!!'
      },
      {
        'firstname': '李四',
        'content': '纳尼!!'
      },
      {
        'firstname': '王五',
        'content': '鬼扯咧'
      },
      {
        'firstname': '王宝',
        'content': '昨晚11点左右,一则郑爽胡彦斌疑似复合的消息刷爆各大论坛,微博在深夜11点热度高达200万直接爆掉,中国意难忘又开始了!!!'
      }
    ]},{
      icon: 'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
      content: '我大学毕业到一家集团公司的办公室当文员。办公室主任有一特长,即文章写得好,很有思想,公司董事长很器重他,董事长的讲话稿和企业的年终总结等一系列重大文章都是出自他的手笔。',
      resource: ['https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
        'https://pic1.zhimg.com/v2-ac3f0eeee5d83d5007da10e07b545092_250x0.jpg?source=172ae18b',
        'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
        'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358',
        'https://img0.baidu.com/it/u=2441833187,3184827457&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=358'
      ],
      zanSource: ['张三', '李四', '王五', '找钱', '孙俪', '王宝'],
      contnet: [{
          'firstname': '张三',
          'content': '你好漂亮呀!!'
        },
        {
          'firstname': '李四',
          'content': '纳尼!!'
        },
        {
          'firstname': '王五',
          'content': '鬼扯咧'
        },
        {
          'firstname': '王宝',
          'content': '昨晚11点左右,一则郑爽胡彦斌疑似复合的消息刷爆各大论坛,微博在深夜11点热度高达200万直接爆掉,中国意难忘又开始了!!!'
        }
      ]}],
    photoWidth: wx.getSystemInfoSync().windowWidth / 5,

    popTop: 0, //弹出点赞评论框的位置
    popWidth: 0, //弹出框宽度
    isShow: true, //判断是否显示弹出框
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function(options) {
    that = this
  },
  // 点击图片进行大图查看
  LookPhoto: function(e) {
    console.log(e);
    wx.previewImage({
      current: e.currentTarget.dataset.photurl,
      urls: e.currentTarget.dataset.list
    })
  },

  // 点击点赞的人
  TouchZanUser: function(e) {
    wx.showModal({
      title: e.currentTarget.dataset.name,
      showCancel: false
    })
  },

  // 删除朋友圈
  delete: function() {
    wx.showToast({
      title: '删除成功',
    })
  },

  // 点击了点赞评论
  TouchDiscuss: function(e) {
    // this.data.isShow = !this.data.isShow
    // 动画
    var animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'linear',
      delay: 0,
    })

    if (that.data.isShow == false) {
      that.setData({
        popTop: e.target.offsetTop - (e.detail.y - e.target.offsetTop) / 2,
        popWidth: 0,
        isShow: true
      })

      // 0.3秒后滑动
      setTimeout(function() {
        animation.width(0).opacity(1).step()
        that.setData({
          animation: animation.export(),
        })
      }, 100)
    } else {
      // 0.3秒后滑动
      setTimeout(function() {
        animation.width(120).opacity(1).step()
        that.setData({
          animation: animation.export(),
        })
      }, 100)

      that.setData({
        popTop: e.target.offsetTop - (e.detail.y - e.target.offsetTop) / 2,
        popWidth: 0,
        isShow: false
      })
    }
  }
})
/* pages/CircleFriends/CircleFriends.wxss */
page{
    background: whitesmoke;
  }
  
  .page{
    width: 100%;
    /* overflow-x: hidden */
  }
  
  /* 列表 */
  .CircleList{
    background: white;
    margin-bottom: 1px;
    border-bottom: 1px solid whitesmoke;
    border-top: 1px solid whitesmoke;
  }
  
  .body-view{
    display: flex;
  }
  
  .left-view{
    width: 150rpx;
    /* background: rebeccapurple; */
  }
  
  .right-view{
    /* background: red; */
  }
  
  /* 头像 */
  .user-icon{
    /* display: flex; */
    width:100rpx;
    height: 100rpx;
    margin-left: 20rpx;
    margin-top: 30rpx;
    margin-right: 20rpx;
  }
  
  /* 昵称 */
  .user-name{
    display: flex;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 18px;
    color: rgb(88, 103, 138);
    margin-top: 30rpx;
    margin-left: 10rpx;
  }
  
  /* 内容 */
  .user-content{
    display: flex;
    font-size: 18px;
    line-height: 50rpx;
    margin-left: 10rpx;
  }
  
  /* 图片 */
  .photo-view{
    background: rebeccapurple;
    margin-left: 10rpx;
    margin-bottom: 20rpx;
  }
  .photo{
    background: rgb(255, 166, 0);  
    float: left;
    margin-right: 10rpx;
    margin-top: 10rpx;
  }
  
  /* 地理位置 */
  .user-address-view{
    display: flex;
    margin-top: 20rpx;
    width: 100%;
  }
  .user-address-view label{
    font-size: 12px;
    margin: 10rpx;
  }
  
  /* 时间、删除、点赞评论 */
  .TDD-view{
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    background: white;
  }
  .TDD-view label{
    font-size: 13px;
    margin-left: 10rpx;
  }
  .TDD-view button{
    font-size: 13px;
    margin-left: 20rpx;
    color: black;
    background: white;
  }
  .TDD-view button::after{
    border: white;
  }
  .TDD-view image{
    width: 50rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
  
  /* 点赞 */
  .zan-view {
    width: 100%;
    background: white;
    margin-bottom: 20rpx;
  }
  .trigon-view{
    /* height: 20rpx; */
    margin-bottom: -15rpx;
  }
  .trigon{
    display: flex;
    width: 40rpx;
    height: 20rpx;
    margin-top: 10rpx;
    margin-left: 10rpx;
  }
  .zan-bg-view{
    display: inline-block;
    width: 97%;
    background: rgb(235, 235, 235);
    margin-right: 20rpx;
    margin-bottom: -11rpx;
    border-top-left-radius: 7rpx;
    border-top-right-radius: 7rpx;
  }
  .zan-user-view{
    display: flex;
    float: left;
    height: 40rpx;
    margin-left: 10rpx;
    /* margin-top: 5rpx; */
    align-content: center;
  }
  .zan-user{
    font-size: 12px;
    line-height: 40rpx;
    height: 40rpx;
    color: rgb(88, 103, 138);
  }
  
  .line{
    width: 97%;
    height: 1px;
    background: white;
  }
  
  /* 评论 */
  .discuss-view{
    background: white;
    width: 97%;
  }
  
  .discuss{
    background: rgb(235, 235, 235);
    line-height: 35rpx;
  }
  
  .discuss label{
    font-size: 12px;
  }
  
  .discuss-user{
    color: rgb(88, 103, 138);
    margin-left: 10rpx;
  }
  
  .content{
    margin-left: 10rpx;
  }
  
  /* 弹出框 */
  .pop-up-box{
    position: absolute;
    height: 60rpx;
    border-radius: 10rpx;
    right: 90rpx;
    background: rgba(0, 0, 0, 0.7)
  }

 

标签:微信,height,content,朋友圈,background,left,仿微信,margin,view
来源: https://www.cnblogs.com/cxyyn/p/15870336.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有