HTML5仿微信朋友圈UI界面，免费下载！支持下拉刷新，下拉刷新也是仿朋友圈效果

程序员SUMER

已于 2024-05-26 18:25:35 修改

阅读量329

点赞数 6

分类专栏： SUMER作品源码前端技术文章标签： html5 微信 ui ios 前端 html uni-app

于 2024-05-26 18:18:55 首次发布

本文链接：https://blog.csdn.net/xiaoyao_studio/article/details/139218221

版权

前端技术同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

源码

49 篇文章 0 订阅

订阅专栏

SUMER作品

19 篇文章 0 订阅

订阅专栏

小编最近开发一个基于html5开发的一个微信聊天前端界面，功能很全面，下面小编给大家分享实例代码，需要的朋友参考下。

首先看下示例演示！

示例演示：点击查看

在这里插入图片描述

这几天使用H5开发了一个仿微信朋友圈前端界面，尤其微信底部编辑器那块处理的很好，使用HTML5来开发，虽说功能效果并没有微信那么全，但是也相当不错了，可以发布动态、表情，图片，视频，发布评论，点赞。还支持下拉刷新，刷新效果也是仿朋友圈

html代码片段：

 <div class="loading" id="loading">
            <div class="inner">
                <p class="loading_img"></p>
                <p class="loading_rate" id="loading_rate1"></p>
            </div>
        </div>
        <!-- <div id="header">
            iScroll
        </div> -->
        <div id="wrapper" style="left:0px; ">
            <div id="scroller" style="transition-timing-function:cubic-bezier(0.1,0.57,0.1,1); transition-duration:0ms; transform:translate(0px,-40px) translateZ(0px); ">
                <div id="pullDown" class="pullDown">
                    <span class="pullDownIcon"></span>
                    <span class="pullDownLabel">
                        <header>
                          <img id="bg" src="./images/bg.jpg">
                          <p id="user-name" class="data-name">程序员SUMER
                                </p>
                          <img id="avt" class="data-avt" src="./images/0.jpg">
                        </header>
                    </span>
                </div>
                <p id="tips">&nbsp;</p>
                <ul>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt data-avt" src="./images/0.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">
                                <span class="data-name">程序员SUMER</span>
                                </p>
                              <div class="post">
                                <p>听说国内冻小狗🐶了, 我这边还挺热.😘</p>
                                <p>
                                  <img class="list-img" src="./images/jt1.jpg" style="height: 80px;">
                                  <img class="list-img" src="./images/yt3.jpg" style="height: 80px;">
                                  <img class="list-img data-avt" src="./images/0.jpg" style="height: 80px;">
                                </p>
                              </div>
                              <p class="time"><?php echo counttime("2017-01-21 11:51:38"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png">小井空, 小冠希, 小冰冰, 杨小幂, 小聪, 小赫, 小星驰, 小云, 小星, 小菲, 小歌, 小化腾, 小路, Papi, 小玉凤, 小朗普, 小晓明...</div>
                              <div class="cmt-list">
                                <p>
                                  <span>小化腾: </span>下次去玩叫上我吖。
                                </p>
                                <p>
                                  <span>小冰冰: </span>我们在国内冻小狗, 我也想跟哥您去热热。😘😘😘
                                </p>
                                <p>
                                  <span>小德华: </span>本来我也在的，可惜摔坏了身体，养伤中。。。
                                </p>
                                <p>
                                  <span>小聪: </span>去哪玩啊？小么爽
                                </p>
                                <p>
                                  <span class="data-name">程序员SUMER</span> 回复
                                  <span>小聪: </span>澳洲大堡礁, 这边刚好是夏季, 挺适合避寒的。
                                </p>
                                <p>
                                  <span class="data-name">程序员SUMER</span> 回复
                                  <span>小德华: </span>保重身体吖，哥。<img class="bq" src="./images/bq1.png">
                                </p>
                                <p>
                                  <span>杨小幂: </span>私人飞机出行, 求带上我~😘
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/n5.jpg"></div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">小聪
                                </p>
                              <div class="post">
                                <p>小一年这兄弟三人发誓一定要出人头地
                                  <br>以后有福同享有难同当
                                  <br>如今:
                                  <br>大哥只手遮天万人之上
                                  <br>二哥小万两富甲一方
                                  <br>三弟淡泊名利为人低调
                                </p>
                                <img class="list-img" src="./images/xa1.jpg" style="height: 80px;">
                                <img class="list-img" src="./images/ma1.jpg" style="height: 80px;">
                                <img class="data-avt list-img" src="./images/0.jpg" style="height: 80px;"></div>
                              <p class="time"><?php echo counttime("2017-01-21 09:38:48"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png">小晗, 小昊, 杨小幂, angelababy, 小冰冰, 小建华, 小丽颖,
                                小云, 小健小, 小歌, 小习, 小化腾, 小龙...</div>
                              <div class="cmt-list">
                                <p>
                                  <span>小晗: </span>赞！
                                </p>
                                <p>
                                  <span>小龙: </span>赞！
                                </p>
                                <p>
                                  <span class="data-name">程序员SUMER: </span>
                                  低调低调。。
                                </p>
                                <p>
                                  <span>小聪</span> 回复
                                  <span class="data-name">程序员SUMER: </span>
                                  哥您就是太低调了
                                </p>
                                <p>
                                  <span>小习</span> 回复
                                  <span class="data-name">程序员SUMER: </span>
                                  好几天没见, 我们该聚聚了
                                </p>
                                <p>
                                  <span>小云</span> 回复
                                  <span class="data-name">程序员SUMER: </span>
                                  有笔大生意找你聊聊
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/a1.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">小井空
                                </p>
                              <p class="post">睡到九点太阳晒PP了，还是好困~😘
                                <img src="./images/c1.jpg">
                                </p>
                              <p class="time"><?php echo counttime("2017-01-21 09:01:48"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png">
                              <div class="r"></div>
                              <div class="cmt-wrap">
                                <div class="like">
                                  <img src="./images/l.png">小赫, 叫兽易小星, 小聪, 小冠希, 小歌, 文章, 小泽玛利亚, 小晗, 小志玲...</div>
                                <div class="cmt-list">
                                  <p>
                                    <span>小赫: </span>怪我咯~
                                  </p>
                                  <p>
                                    <span>小冠希: </span>怪我咯~
                                  </p>
                                  <p>
                                    <span class="data-name">程序员SUMER: </span>怪我咯~
                                  </p>
                                  <p>
                                    <span>小井空</span> 回复
                                    <span class="data-name">程序员SUMER: </span>知道就好 😘
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/a2.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">小伦
                                </p>
                              <div class="post">
                                <p>
                                  <span style="color:#576b95">@程序员SUMER</span>, 决战夜你要加油！我们哎哟不错战队是最屌的！
                                </p>
                                <img class="list-img" src="./images/c2.jpg" style="height: 80px;">
                                <img class="data-avt list-img" src="./images/0.jpg" style="height: 80px;"></div>
                              <p class="time"><?php echo counttime("2017-01-21 01:12:33"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png">小峰, 小英, 小澄庆, 大鹏, 小德纲, 小宝强, 小嘉, 小超, 小奕迅, 小菲...</div>
                              <div class="cmt-list">
                                <p>
                                  <span class="data-name">程序员SUMER</span>
                                  杰伦老师, 决战夜小公举会来吗。~
                                </p>
                                <p>
                                  <span>小伦</span> 回复 <span class="data-name">程序员SUMER: </span>
                                  你拿冠军了, 我让你当小公举的小纸。
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/a5.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="ads">推广
                                <img src="./images/ads.png">
                                </p>
                              <p class="po-name">亚洲航空Airasia
                                </p>
                              <div class="post">亚洲航空(AirAsia)为您带来网上最低航费、更高航班频率飞往亚洲超过100个目的地。小上预订您的优惠航班,与世界最佳低小本航空一起飞行!
                                <p>
                                  <a class="ad-link" href="http://www.weibo.com/208630004">查看详情
                                    <img src="./images/link.png"></a>
                                </p>
                                <a href="http://www.weibo.com/208630004">
                                  <img class="noplayimg" src="./images/asd888.jpg"></a>
                              </div>
                              <p class="time"><?php echo counttime("2017-01-20 23:58:48"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png">小冰冰, 小晨, 小聪, 小健小, 小振华, 小霆锋, 小家印...</div>
                              <div class="cmt-list">
                                <p>
                                  <span>小冰冰: </span><span>@程序员SUMER</span> 今晚小尔代夫, 约吗？
                                </p>
                                <p>
                                  <span>小晨</span> 回复 <span>小冰冰: </span>小肥羊~初七情人节见！定格我们的爱情吧。😘
                                </p>
                                <p>
                                  <span>小聪: </span>我家飞机多，不用推送给我！
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/a3.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">小超
                                </p>
                              <div class="post">
                                <p>WE ARE伐木累！<span style="color:#576b95">@程序员SUMER</span> 欢迎加入跑男第三季！😘😘😘
                                </p>
                                <p>
                                  <img class="list-img" src="./images/c3.jpg" style="height: 80px;">
                                  <img class="list-img" src="./images/c4.jpg" style="height: 80px;">
                                  <img class="data-avt list-img" src="./images/0.jpg" style="height: 80px;">
                                </p>
                              </div>
                              <p class="time"><?php echo counttime("2017-01-20 22:33:48"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png"><b class="data-name">程序员SUMER</b>, 小晨, 小祖蓝, 小宝强, 小歌, 小赫, Anglababy, 小薇, 小星, 小冰冰...</div>
                              <div class="cmt-list">
                                <p>
                                  <span class="data-name">程序员SUMER: </span>超哥, 当初为什么要选我。
                                </p>
                                <p>
                                  <span>小超</span> 回复
                                  <span class="data-name">程序员SUMER: </span>
                                  你是我认识的人当中, 最快的！
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/a4.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">小冰冰
                                </p>
                              <p class="post">我的生日趴, 你为什么不来？😘😘😘
                                <img class="data-avt" src="./images/0.jpg">
                                </p>
                              <p class="time"><?php echo counttime("2017-01-20 21:44:48"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png">
                                <b class="data-name">程序员SUMER</b>, 小晨, 小治廷, 小明, 小敬轩, 小晓明, 小经天, 小格, 小薇, 小心如...</div>
                              <div class="cmt-list">
                                <p>
                                  <span>小晨: </span>呵呵。
                                </p>
                                <p>
                                  <span class="data-name">程序员SUMER: </span>最近忙, 就酱。😘
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                    <li>
                      <div class="po-avt-div">
                          <div class="po-avt-wrap">
                            <img class="po-avt" src="./images/a7.jpg">
                          </div>
                          <div class="po-cmt">
                            <div class="po-hd">
                              <p class="po-name">小星
                                </p>
                              <p class="post">"≡(^o^)≡"（看我的手势）完美！
                                <img src="./images/c8.jpg">
                                </p>
                              <p class="time"><?php echo counttime("2017-01-20 19:59:33"); ?>
                                </p>
                              <img class="c-icon" src="./images/c.png"></div>
                            <div class="r"></div>
                            <div class="cmt-wrap">
                              <div class="like">
                                <img src="./images/l.png">
                                <b class="data-name">程序员SUMER</b>, 小涛, 小歌, 小建华, 小南, 小豫, 小嘉, 小祖蓝...</div>
                              <div class="cmt-list">
                                <p>
                                  <span class="data-name">程序员SUMER: </span>星姐, 求虐！
                                </p>
                                <p>
                                  <span>小星</span> 回复
                                  <span class="data-name">程序员SUMER: </span>你呢, 人长的挺好看, 就是偏偏要靠才华。
                                </p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </li>
                </ul>
                <div class="pullUp">&nbsp;</div>
            </div>
            <div class="iScrollVerticalScrollbar iScrollLoneScrollbar scrollbar-box">
                <div class="iScrollIndicator scrollindecator-box"> </div>
            </div>
        </div>

后面最主要的是CSS部分的代码：

/*loading*/
.loading { width: 100%; height: 100%; opacity: 1; position: fixed; top: 0px; left: 0px; z-index: 9; background-color: #fff;}
.loading .inner { width:42.65%; height: 120px; position: absolute; top:45%; left: 50%; margin: -80px 0 0 -120px; margin-left:-21.32%; text-align: center; color:#000 !important; font-size: 14px; display:block }



.loading .loading_rate {  color: #ddd !important; font-size: 16px;  line-height: 40px; display: block; }
.loading_img { margin: 0 auto; width: 100%;color: #ddd !important;font-family:LouisItalic !important; font-size:18px }

#list,#list li,.po-hd,.post {
    overflow: hidden
}

.po-cmt,.post .list-img:nth-child(1),.time {
    float: left
}

#list li,.cmt-wrap,.r,.time {
    clear: both
}

.btn,a {
    cursor: pointer
}

blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,img {
    border: 0
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: 400
}

ol,ul {
    list-style: none none
}

caption,th {
    text-align: left
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: 400
}

q::after,q::before {
    content: ""
}

abbr,acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,select,textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

legend {
    color: #000
}

a {
    text-decoration: none
}

input {
    -webkit-appearance: none
}

* {
    -webkit-tap-highlight-color: transparent
}

html {
    background-color: #fafafa;
    font-family: Arial,sans-serif;
    font-size: 20px
}

.hide {
    display: none
}

header {
    position: fixed;
    margin-top: 0px;
}

#avt,#user-name {
    position: absolute
}

#bg {
    width: 100%
}

#user-name {
    text-align: right;
    right: 105px;
    bottom: 15px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    text-shadow: 0 1px .5px #000;
}

#share a,.btn {
    font-size: 14px
}

.btn,b {
    font-weight: 400
}

#share a,#share p,.btn {
    text-align: center
}

#avt {
    width: 74px;
    height: 74px;
    border: 1px solid #dbdbdb;
    right: 10px;
    bottom: -22px;
    padding: 1px;
    background-color: #fff;
    border-radius: 15px;
}

#list li,.po-hd {
    position: relative
}

#list {
    padding: 30px 0 10px
}

#list li {
    line-height: 1.5;
    border-bottom: 1px solid #e2e2e2;
    margin-top: 15px;
    padding-bottom: 15px
}

#share a:nth-child(2),.ads,.po-avt {
    position: relative
}

.ads {
    color: #999;
    right: 2px;
    top: 0px;
    position: absolute;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 0px 4px;
    font-size: 12px;
    height: auto;
}

.ads img {
    width: 10px;
    height:10px;
    padding-left: 0px;
    vertical-align: middle;
}

.ad-link {
    color: #3b5384
}

.post .ad-link img {
    width: 11px;
    padding: 0;
    display: inline-block
}
.po-avt-div {
    width: 100%;
    padding: 0.6rem 0.6rem;
    height: 100%;
    display: table;
    background: transparent;
    border-bottom: 1px solid #efefef;
}

.po-avt-wrap {
    width: 16%;
    float: left;
}

.po-avt {
    width: 84%;
    height: auto;
    top: 0;
    border-radius: 10px;
}
.r {
    border-bottom: 8px solid #eee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 1px;
    margin-top: 3px;
    margin-left: 10px
}

.po-cmt {
    width: 84%;
    box-sizing: border-box;
}

.po-name {
    color: #576b95;
    padding-bottom: 4px;
    font-weight: bolder;
    font-size: 0.7rem;
}

.post {
    color: #252525;
    padding-bottom: 8px
}
.post img {
    padding: 6px 5px 0 0;
    display: block;
    max-height: 180px;
    max-width: 90%;
}

#share a,.btn {
    display: inline-block
}

.post .list-img {
    width: 30%;
    max-height: 80px;
    max-width: 80px;
    padding-right: 5px;
    float: left;
    object-fit: cover
}

.post .list-img:last-child {
    padding-right: 0
}

.time {
    color: #b1b1b1
}

.c-icon {
    width: 20px;
    float: right
}

.cmt-wrap {
    width: 100%;
    background-color: #eee
}

.like {
    color: #576b95;
    padding: 5px 5px 3px 12px
}
.scrollbar-box
{
	position:absolute;
	z-index:9999;
	width:7px;
	bottom:2px;
	top:2px;
	right:1px;
	overflow:hidden;
	pointer-events:none;
	transform:translateZ(0px);
	transition-duration:500ms;
	opacity:0;
}
.scrollindecator-box
{
	box-sizing:border-box;
	position:absolute;
	background:rgba(0,0,0,0.498039);
	border:1px solid rgba(255,255,255,0.901961);
	border-radius:3px;
	width:100%;
	transition-duration:0ms;
	display:block;
	height:185px;
	transform:translate(0px,16px) translateZ(0px);
	transition-timing-function:cubic-bezier(0.1,0.57,0.1,1);
	
}

.like img {
    width: 1.1rem;
    height: 0.7rem;
    padding-right: 5px;
    vertical-align: middle;
}

.cmt-list {
    padding: 0 12px 8px 12px;
    color: #454545
}

.cmt-list p {
    padding-top: 3px
}

.cmt-list span {
    color: #3b5384
}

#share a {
    border-radius: 5px;
    background-color: #26337e;
    color: #fff;
    line-height: 2.5;
    width: 138px;
    margin: 0 10px
}

#share a:nth-child(1) {
    position: absolute;
    left: 50%;
    margin-left: -148px
}

#share a:nth-child(2) {
    right: 50%;
    margin-right: -148px
}

#share p {
    padding: 45px 0 10px;
    color: #999
}

#guide {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-image: url(../images/guide2.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-color: #191919;
    background-size: contain;
    opacity: .9
}

.btn {
    margin-bottom: 0;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-group-lg>.btn,.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
}

.btn-block {
    display: block;
    width: 100%
}

.bq {
    width: 13px;
    padding-left: 2px
}

.hidenone {
    display: none
}

源码免费下载，请点击这里下载

*****SUMER UI3.0****

程序员SUMER

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5仿微信朋友圈UI界面，免费下载！支持下拉刷新，下拉刷新也是仿朋友圈效果

HTML5仿微信朋友圈UI界面，免费下载！支持下拉刷新，下拉刷新也是仿朋友圈。小编最近开发一个基于html5开发的一个微信聊天前端界面，功能很全面，下面小编给大家分享实例代码，需要的朋友参考下。首先看下示例演示！这几天使用H5开发了一个仿微信朋友圈前端界面，尤其微信底部编辑器那块处理的很好，使用HTML5来开发，虽说功能效果并没有微信那么全，但是也相当不错了，可以发布动态、表情，图片，视频，发布评论，点赞。还支持广告。html代码片段：后面最主要的是CSS部分的代码：源码免费下载，请点击这里下载
复制链接

扫一扫