如何使用YonBuilder移动端低代码开发平台(APICloud)实现朋友圈功能？

YonBuilder低代码开发平台

于 2022-04-15 14:02:29 发布

阅读量765

点赞数

分类专栏：低代码开发多端开发移动开发文章标签： apicloud App开发

本文链接：https://blog.csdn.net/weixin_43947457/article/details/124193163

版权

朋友圈承载着大量人们生活、工作的碎片化记忆，是大家表达自我、开展社交的重要场景。那么，在YonBuilder移动端低代码开发平台(APICloud)能够实现哪些朋友圈功能、以及该如何实现呢？本文将为各位开发者带来朋友圈主要功能开发教程。首先展示效果：

项目结构图以及用到的模块

在这里插入图片描述

主要功能

1、下拉刷新、上拉加载（mescroll.js）

2、点赞评论

3、导航背景透明渐变效果

4、图像预览（UIPhotoViewer）

5、图像压缩

6、定位附近地点（aMap）

7、图像批量上传

功能点详解

1、下拉刷新和上拉加载下拉刷新和上拉加载用的是 mescroll.js(自带图像懒加载，官方网站有详细使用说明文档) 实现的思路是自定义下拉样式，当下拉的时候图像不停旋转同时向下移动，几秒后向上移动消失在顶部。下拉刷新效果需要自定义，更改下拉刷新的布局容器样式 warpClass: ‘refresh’ 。

//下拉刷新容器 css 样式如下：

.refresh {
    position: fixed;
    top: 0;
    width: 100%
}

旋转动画效果 css 样式如下：

.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);
    }
}

2、点赞评论

这个功能主要是样式的设计难度很小但是需要注意当屏幕滚动时需要隐藏评论框以及相关按钮。