最佳实践|五步实现轮播图

随着5G的发展,移动端界面的展示不再受限于网速,所以像图片轮播、GIF、短视频的展现方式更加能吸引用户的眼球,例如通常位于首页顶部的轮播图,以动态的形式为用户呈现多张图片,自动轮播的效果可以提高商品、内容的曝光度,提高从浏览到购买的转化率以及衡量内容价值。

功能

  1. 自动循环播放图片
  2. 手动实现前一张、后一张图片切换

五步实现轮播图

第一步——搭

完成组件搭建
  • 添加横向列表组件至页面中,并修改其大小、位置及样式
  • 添加图片组件至横向列表中,并修改其大小、位置及样式

第二步——建

建立image_list数据模型,并在模型中创建image字段,接着预览小程序从而让数据模型生效 注意:预览之前需要先进行“小程序授权”
预览成功后,等待一分钟左右刷新页面,即可进入管理后台界面添加图片数据

第三步——绑

第四步——控

前提条件:开启分页
  • 通过打开“自动播放”开关即可实现轮播图自动滚动
  • 通过为按钮组件添加“滚动横向列表”行为即可实现手动切换轮播图
  • 如果想在轮播到最后一张后回到第一张,需打开“循环”开关
  • 如果想显示轮播到第几张图,需打开“显示指示点”开关,其中指示点颜色可修改
自动播放
手动切换

第五步——调

调整轮播图中存在的问题
  • 图片未撑满整个图片组件:修改图片裁剪模式为填充空间

展示“轮播图”

2022-06-24
3 4