滑动内容选择器通常是一种用户界面组件,允许用户通过滑动手势在一组内容之间进行选择。这种组件可以在移动应用程序或网页中使用,以提供直观的图片选择体验。
那今天就教大家如何用中继器制作一个滑动内容选择器,我们会以滑动选择电影为案例,具体实现的效果如下:
一、效果展示
- 可以左右拖动选择电影,选择对应的电影
- 也可以通过鼠标单击,快速选择对应的电影
- 选中的电影会放大,背景大图会显示该电影的大图(部分)
- 下面会回显已选择的电影的信息
二、制作教程
1. 图片中继器的设置
我们需要增加一个中继器,在里面添加一个图片元件和透明的矩形,如下图所示摆放。
中继器表格里增加一下几列
- no列:对应序号,按12345……顺序填写即可
- pic列:图片列,鼠标右键导入对应图片
- name列:对应电影名
- score列:对应评分
- introduce列:对应基本介绍
- xuanzhong列:用于控