佛山网站建设公司招聘,网站开发后台软件,外贸公司网站推广,电商关键词排名优化怎么做?滑动内容选择器通常是一种用户界面组件#xff0c;允许用户通过滑动手势在一组内容之间进行选择。这种组件可以在移动应用程序或网页中使用#xff0c;以提供直观的图片选择体验。
那今天就教大家如何用中继器制作一个滑动内容选择器#xff0c;我们会以滑动选择电影为案例…滑动内容选择器通常是一种用户界面组件允许用户通过滑动手势在一组内容之间进行选择。这种组件可以在移动应用程序或网页中使用以提供直观的图片选择体验。
那今天就教大家如何用中继器制作一个滑动内容选择器我们会以滑动选择电影为案例具体实现的效果如下
一、效果展示
1、可以左右拖动选择电影选择对应的电影
2、也可以通过鼠标单击快速选择对应的电影
3、选中的电影会放大背景大图会显示该电影的大图部分
4、下面会回显已选择的电影的信息 【原型预览含下载地址】
https://axhub.im/ax9/aeb3641f0e953d73/#g1p影院详情 二、制作教程
1. 图片中继器的设置
我们需要增加一个中继器在里面添加一个图片元件和透明的矩形如下图所示摆放 中继器表格里增加一下几列
no列对应序号按12345……顺序填写即可
pic列图片列鼠标右键导入对应图片
name列对应电影名
score列对应评分
introduce列对应基本介绍
xuanzhong列用于控制哪项被选择如果值等于1就默认该行内容被选中一般默认第一行内容被选中 填写完成后在中继器每项加载时我们添加交互用设置图片的交互将图片设置到中继器里面的图片元件。 2. 大图的设置
我们增加一个图片元件宽度和沾满手机屏幕上面放置一层半透明的遮罩大图只显示一部分内容即遮罩所在的区域。
在遮罩所在区域的底部居中位置我们放置一个倒三角形图片移入该区域就是选中该图片的意思。 我们将这里面所有元件转为动态面板因为只有动态面板才能显示一部分内容而且可以写拖动的交互。
我们在中继器每项加载时添加条件我们定义如果xuanzhong列的值等于1那该部分内容就是被选择的所以我们用设置图片的交互将符合条件的所在行pic列的图片值设置到背景大图里 3. 回显内容的设置
我们增加两个文本标签分别对应于介绍文字和电影名如下图所示摆放 在内容被选择后我们通过设置文本的交互将被选择锁在行name列的值设置到电影名的文本标签将introduce列和score列的值分别设置介绍的文本标签里 4. 选中图片放大的交互
在内容被选择后我们通过设置尺寸的的交互将对应的图片设置大一点这样就有突出选中的效果 5.动态面板拖动时的设置
鼠标拖动图片区域的动态面板时我们用移动的交互将图片中继器移动但是这里需要注意移动的交互无法直接移动中继器原件所以我们可以把中继器组合一下然后移动中继器组合。移动我们选择跟随鼠标水平移动并且根据实际情况设置移动的边界。 拖动结束时我们要先判断移动了多少格例如一格的宽度是137那他可能移动了200的距离那这就相当于移动了1-2格的距离所以我们要用tofixed函数来进行四舍五入得到一个整数的移动数
然后我们在用移动的事件将图片中继器组合移动到对应格数的位置例如200/1371.46四舍五入之后其实就是移动了一格。
然后我们我们再用更新行的交互这里移动格数和中继器序号相等的相当于被选择了所以我们将他选中列的值更新为1。这里还需要考虑到的一点是前面可以能已经有其他行被选择他xuanzhong列的值已经是1了所以我们要用标记行的交互先标记所有行然后把所有行xuanzhong列的值更新为0再执行上述的交互。 6.鼠标单击图片的交互
这里和上面的原理基本一致但是我们就不需要计算移动了多少格我们直接从点击的图片所在的行数就可以判断了例如第几第三张图片就是要移动到第三格的位置所以后面移动的交互以及先标记所有行然后把所有行xuanzhong列的值更新为0都是和前面一样的 这样我们就完成了滑动内容选择器_选择电影案例的制作了下次使用也很方便我们只需要在中继器表格里填写内容即可自动生成交互效果。后续我们也可以根据需要增加一些中继器之间的联动例如通过是筛选事件查看对应的电影排期等效果
那以上就是本期教程的全部内容感兴趣的同学们可以动手试试哦感谢您的阅读我们下期见。
