apicloud apicloud

注册
查看: 308|回复: 11

[案例源码] 仿微信朋友圈功能

主题:
37
帖子:
1252
云币:
17002

我李白贼6

[案例源码] 仿微信朋友圈功能

308 11 | 发表于 2021-6-27 23:54:24 |阅读模式 | |
本帖最后由 川哥哥 于 2021-6-28 00:04 编辑

体验二维码



页面演示



主要用到的模块aMap(定位)、UIPhotoViewer(图像预览) 、 imageFilter结合trans做图像压缩、下拉刷新和上拉加载用mescroll.js
数据库 circle(朋友圈主表)、circle_zan(点赞)、circle_comment(评论与回复)、user(用户) 各表之间的关系就不细说了。


一、发布朋友圈
1、发布之前肯定要对图像进行压缩然后再上传,我这里用imageFilter结合trans做单个图像压缩,效果还可以。图像批量压缩可以用compactPicture模块效果也不错就是要收费。
2、ajax文件批量上传参数需要设置为files: { "pic[]": pics } .
3、定位功能详细参考基于高德地图仿微信定位

二、朋友圈首页
1、下拉刷新和上拉加载我用的是mescroll.js 下拉刷新效果需要自定义,更改下拉刷新的布局容器样式 warpClass: 'refresh'  
<div class="refresh"></div>  下拉容器没有宽高不可见
        .refresh {
            position: fixed;
            top: 0;
            z-index: 1;
        }


2、旋转动画效果<div class="laoding to_bottom"><img src="../../image/friend_circle.png" class="img"></div>

        .laoding {
            position: fixed;
            top: -1.5rem;
            left: 2rem;
            width: 1.5rem;
            height: 1.5rem;
            z-index: 1;
        }

        .to_bottom {
            -webkit-animation: to_bottom 2s;
            animation: to_bottom 2s;
        }

        .laoding .img {
            width: 1.3rem;
            height: 1.3rem;
            animation: rotating 0.2s linear infinite;
            -webkit-animation: rotating 0.2s infinite;
        }

        @keyframes to_bottom {
            0% {
                top: -4rem;
            }

            4% {
                top: 3rem;
            }

            8% {
                top: 4rem;
            }

            10% {
                top: 5rem;
            }

            50% {
                top: 5rem;
            }

            75% {
                top: 5rem;
            }

            100% {
                top: -1.5rem;
            }
        }

        @keyframes rotating {
            to {
                transform: rotate(1turn);
            }
        }




当下啦刷新就添加和删除动画效果

                    $(".laoding").addClass("to_bottom");
                    setTimeout(function () {
                        $(".laoding").removeClass("to_bottom");
                    }, 2000)



3、图像预览我用的是UIPhotoViewer模块可以长安保存、放大缩小、支持手势。也可以用photoswipe.js做图像预览。
UIPhotoViewer模块图像切时没有显示原点滑动切换效果,这个需要自己做。 打开一个Frame显示图像切换状态 用圆圈数量来呈现 传递图像数量以及当前图像index




                    api.openFrame({
                        name: 'dots',
                        url: 'show_dot.html',
                        rect: {
                            x: 0,
                            y: api.winHeight - 36,
                            w: 'auto',
                            h: 'auto'
                        },
                        pageParam: {
                            index: indexs,
                            nub: imgs.length
                        }
                    });




长安图像保存、收藏就不讲了。


三、页面截图

   



四、源码下载


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

驾校小白

UID:936535

主题:
0
帖子:
14
云币:
0
发表于 2021-7-20 16:33:48 |
奥利给!马上学起来兄弟们

职业车手

UID:441392

主题:
33
帖子:
2305
云币:
2771

APICloud粉丝志愿者一周年中秋节女朋友装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼儿童节快乐

发表于 2021-6-28 11:20:37 |

主题:
37
帖子:
1252
云币:
17002

我李白贼6

 楼主| 发表于 2021-6-28 12:32:51 |

主题:
52
帖子:
523
云币:
698
发表于 2021-7-2 11:20:22 |
华为P40PRO,点击我的,顶部有部分区域有遮挡呢。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题:
52
帖子:
523
云币:
698
发表于 2021-7-2 11:23:39 |
虽然功能不太完善,不过朋友圈能做到这么仿真,也是值得鼓励的

主题:
37
帖子:
1252
云币:
17002

我李白贼6

 楼主| 发表于 2021-7-2 13:40:15 |
ColdKiller 发表于 2021-7-2 11:23
虽然功能不太完善,不过朋友圈能做到这么仿真,也是值得鼓励的

还在完善中

驾校小白

UID:936535

主题:
0
帖子:
14
云币:
0
发表于 2021-7-20 16:32:51 |
66666666666666

驾校小白

UID:936535

主题:
0
帖子:
14
云币:
0
发表于 2021-7-20 16:33:12 |
答主牛啊,这波算是学到了

主题:
37
帖子:
1252
云币:
17002

我李白贼6

 楼主| 发表于 6 天前 |
zhj99 发表于 2021-7-20 16:33
答主牛啊,这波算是学到了

12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表