如何在页面中设置“头像”样式

登录

本帖最后由 jzhou21 于 2021-3-8 15:05 编辑

目前需求有个“照片墙”场景，把员工照片贴上去。现有做法是html设置自定义样式Avatar来实现。1、如何在活字格中快速设置，达到以下效果？
2、手机页面如何向下滑动，以达到翻页效果；顶部拉取，以达刷新效果。

Eric.Liang · Eric.Liang

jzhou21 发表于 2021-3-8 18:21
你好，不好意思可能是描述不具体，不是照片墙如何操作，是圆形头像如何定义
图文列表达不到“圆形”头像的 ...

圆形图片要依靠代码或者CSS样式去调整
后端API自动处理用户头像案例
https://gcdn.grapecity.com.cn/fo ... 7&fromuid=51381
(出处: 葡萄城产品技术社区)
用户头像样式可以弄成圆的么
https://gcdn.grapecity.com.cn/fo ... 7&fromuid=51381
(出处: 葡萄城产品技术社区)

Erik.Xue · Erik.Xue

您好，如果想实现所描述的功能，可以参考以下的回答：

1、可以看一下下面的教程，使用图文列表的方式实现类似照片墙的效果。

一看就会，超有用活字格技能：七十二，手机端主从表添加修改功能设计（饿了么）
https://gcdn.grapecity.com.cn/fo ... 9&fromuid=58155
(出处: 葡萄城产品技术社区)

2、我理解是想要在手机端，然后下滑屏幕，可以刷新当前页面，以拉取最新的数据是吗？

如果是这样的话，目前活字格暂时没有可以直接实现此需求的功能，不过可以通过写代码的方式，也就是需要包一个插件来实现此效果。

Timothy.Xu · Timothy.Xu

您好，这个样式可以使用图文列表来实现，您可以参考这里：

图文列表 - 活字格6.0帮助手册 - 葡萄城产品文档中心

向下滑动翻页可以使用表格的按需加载来实现，您可以参考这里：

按需加载 - 活字格6.0帮助手册 - 葡萄城产品文档中心

向上滑动刷新的功能，目前活字格不支持此效果，可能需要您自行代码实现。

jzhou21 · jzhou21

你好，不好意思可能是描述不具体，不是照片墙如何操作，是圆形头像如何定义
图文列表达不到“圆形”头像的效果，示例效果中原图片可能是550*516、412*550或者是411*550等不规则尺寸
页面展示后均为圆形，圆形内部显示为照片，给出一种头像的效果。
但目前不知道活字格插入图片后，如何给图片再定义类似嵌套样式。
也就是在image外再包一层div 外面div固定大小里面image宽度100%

		自动登录	找回密码
密码			立即注册

[已处理] 如何在页面中设置“头像”样式

最佳答案

4 个回复

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章

Wyn高级认证

Wyn认证