列表多图组件怎么用?小程序开发
轻栈insarea
轻栈insarea微头条
2024-03-20

用轻栈开发小程序,使用【列表多图】组件。

进入轻栈编辑器【Design Lab】,拖拽【列表多图】到界面->右键编辑。

1710920652495095357.jpg

-- 选择展示样式:列表/横向滑动/瀑布流
-- 添加图片
-- 高级设置:显示分页、图片描述、图片播放比例、跳转设置、图片样式。

示例:上传10张尺寸不同的图片。
展示样式选择【列表】时,图片每行顶部对齐。当图片尺寸一致时,这个展示样式没有任何问题,可以呈现出不错的展示效果。

1710920654205032660.jpg


但当图片尺寸不一时,展示位就会出现很多空白。可将展示样式修改成瀑布流,问题马上解决。

1710920655754068377.jpg


每张图片都可以单独设置跳转,点击图片右下角进行编辑, 自定义链接跳转即可。

1710920656742026234.jpg


想要介绍图片,可通过展示图片名称的方式,所以建议给图片重命名之后上传。假如你已经上传了图片,想要修改图片名称,可以重新上传重命名的图片,也可在iYong云库中修改图片名称,选中图片,左上角出现【√】,右键重命名文件即可。

1710920660536012736.jpg


除了重命名,还可以对图片进行下载,预览,复制链接,删除,移动到其他文件夹和裁剪等操作。

展示样式选择横向滑动时,建议图片尺寸保持一致,可以在iYong云库裁剪或用智能出图的功能编辑图片。

1710920653342027860.jpg

列表多图组件作为商品橱窗效果不错,有很多小程序商城都会用到,普通的商城小程序,展示个人摄影作品的虚拟商品小程序,展示各种获取积分活动的积分商城小程序,还有旅游小程序,外卖小程序,除了商城型的小程序,展示型小程序也总是出现【列表多图】组件,方便访客找到想要的内容,同时让小程序主题更清晰。


阅读量:1446
上一页:博客文章小程序,添加博客列表组件
下一页:开发小程序,图文展示组件用起来!