scroll-view无限滚动并且点击居中

时间: 2023-07-11 09:29:36 浏览: 44
实现 scroll-view 的无限滚动并且点击居中可以通过以下步骤: 1. 在 scroll-view 中创建一个宽度为所有子元素宽度之和的容器,在容器中使用 flex 布局来排列子元素。 2. 复制一份子元素列表,将其排列在原列表的后面。 3. 监听 scroll-view 的 scroll 事件,当滚动到最后一个子元素之后,将容器中的子元素列表重置为原列表,然后重新排列子元素。 4. 监听子元素的点击事件,获取被点击的子元素的索引,计算出容器需要滚动的距离,然后使用 scroll-view 的 scrollIntoView 方法将被点击的子元素滚动到居中位置。 以下是一个简单的示例代码: ```html <scroll-view scroll-x style="white-space: nowrap;" bindscroll="onScroll"> <view wx:for="{{items}}" wx:key="{{index}}" data-index="{{index}}" bindtap="onClick">{{item}}</view> </scroll-view> ``` ```javascript Page({ data: { items: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], containerWidth: 0, itemWidth: 0, currentIndex: 0 }, onLoad: function () { wx.createSelectorQuery().in(this).select('.container').boundingClientRect(res => { this.setData({ containerWidth: res.width }) }).exec() wx.createSelectorQuery().in(this).select('.item').boundingClientRect(res => { this.setData({ itemWidth: res.width }) }).exec() }, onScroll: function (event) { const { scrollLeft } = event.detail const { containerWidth, itemWidth, items } = this.data const maxScrollLeft = (items.length * itemWidth) - containerWidth if (scrollLeft >= maxScrollLeft) { this.setData({ items: [...items, ...items] }) } }, onClick: function (event) { const { index } = event.currentTarget.dataset this.setData({ currentIndex: index }) wx.createSelectorQuery().in(this).select(`.item[data-index="${index}"]`).boundingClientRect(res => { const { containerWidth } = this.data const itemLeft = res.left const itemWidth = res.width const itemCenter = itemLeft + (itemWidth / 2) const scrollLeft = itemCenter - (containerWidth / 2) wx.pageScrollTo({ scrollLeft, duration: 300 }) }).exec() } }) ``` 在这个示例中,我们先获取容器和子元素的宽度,然后在 scroll 事件中判断是否需要重置并重新排列子元素。在点击事件中,我们获取被点击的子元素的位置,然后计算出需要滚动的距离,最后使用 pageScrollTo 方法将 scroll-view 滚动到居中位置。

相关推荐

void lv_example_scroll_2_dir(void) { #if 1 lv_obj_t* cont = lv_obj_create(lv_scr_act()); lv_obj_set_size(cont, 400, 300); lv_obj_add_flag(cont, LV_OBJ_FLAG_SCROLL_ONE); /*Allow max 1 page swipe*/ lv_obj_set_scroll_snap_x(cont, LV_SCROLL_SNAP_CENTER); /*Snap a page to the center*/ lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_BEGIN/*LV_EVENT_ALL*//*LV_EVENT_SCROLL*//*LV_EVENT_SCROLL_END*/, NULL); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_END, NULL); lv_obj_center(cont); /*A grid for the left center and right pages*/ lv_coord_t col_dsc[] = { LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST }; lv_coord_t row_dsc[] = { LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST }; lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc); /*Create 5 pages*/ for (int i = 0; i < 10; i++) { lv_obj_t* obj = lv_obj_create(cont); lv_obj_set_size(obj, lv_pct(33), lv_pct(100)); lv_obj_t* label = lv_label_create(obj); lv_label_set_text_fmt(label, "Page %d", i); lv_obj_set_style_border_width(obj, 0, 0); } /*Page 2, 3 hidden, page 4, 0, 1 are placed to the grid */ //lv_obj_add_flag(lv_obj_get_child(cont, 2), LV_OBJ_FLAG_HIDDEN); //lv_obj_add_flag(lv_obj_get_child(cont, 3), LV_OBJ_FLAG_HIDDEN); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 2), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 3), LV_GRID_ALIGN_CENTER, 3, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 4, 1, LV_GRID_ALIGN_CENTER, 0, 1); /*Be sure page 0 is centered*/ lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF); }帮我注释一下这段代码

这段代码是 LittlevGL (LVGL)的示例代码,实现了一个可以左右滑动的页面(类似于轮播图),页面可以居中对齐。下面是代码注释: C void lv_example_scroll_2_dir(void) { /*创建一个容器,作为滑动页面的容器*/ lv_obj_t* cont = lv_obj_create(lv_scr_act()); lv_obj_set_size(cont, 400, 300); /*设置容器只能左右滑动一页*/ lv_obj_add_flag(cont, LV_OBJ_FLAG_SCROLL_ONE); /*设置容器滑动时,页面停留在中心*/ lv_obj_set_scroll_snap_x(cont, LV_SCROLL_SNAP_CENTER); /*关闭滚动条*/ lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF); /*容器添加滑动事件*/ lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_BEGIN/*LV_EVENT_ALL*//*LV_EVENT_SCROLL*//*LV_EVENT_SCROLL_END*/, NULL); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_END, NULL); /*容器居中*/ lv_obj_center(cont); /*创建一个网格,用于布局页面*/ lv_coord_t col_dsc[] = { LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST }; lv_coord_t row_dsc[] = { LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST }; lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc); /*创建 10 个页面*/ for (int i = 0; i < 10; i++) { lv_obj_t* obj = lv_obj_create(cont); lv_obj_set_size(obj, lv_pct(33), lv_pct(100)); lv_obj_t* label = lv_label_create(obj); lv_label_set_text_fmt(label, "Page %d", i); lv_obj_set_style_border_width(obj, 0, 0); } /*将第 0、1、2、3、4 个页面放到网格中,使它们居中*/ lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 2), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 3), LV_GRID_ALIGN_CENTER, 3, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 4, 1, LV_GRID_ALIGN_CENTER, 0, 1); /*将第 2、3 个页面隐藏*/ //lv_obj_add_flag(lv_obj_get_child(cont, 2), LV_OBJ_FLAG_HIDDEN); //lv_obj_add_flag(lv_obj_get_child(cont, 3), LV_OBJ_FLAG_HIDDEN); /*将页面 0 居中显示*/ lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF); } 注释中已经解释了每一行代码的作用,其中有些代码是被注释掉了的,这可能是作者在开发过程中的调试代码。

最新推荐

海量自托管服务列表:软件网络服务和web应用程序的列表,可以托管在您自己的服务器上

免费的软件网络服务和web应用程序的列表,可以托管在您自己的服务器上

Python代码源码-实操案例-框架案例-通过正则表达式快速获取电影的下载地址.zip

Python代码源码-实操案例-框架案例-通过正则表达式快速获取电影的下载地址.zip

Python代码源码-实操案例-框架案例-解决将多个PDF文档合并为一个PDF文档时出现的编码问题.zip

Python代码源码-实操案例-框架案例-解决将多个PDF文档合并为一个PDF文档时出现的编码问题.zip

A30车门密封条烤箱(sw18可编辑+工程图+bom)_零件图_机械工程图_机械三维3D设计图打包下载.zip

A30车门密封条烤箱(sw18可编辑+工程图+bom)_零件图_机械工程图_机械三维3D设计图打包下载.zip

基于SpringBoot的家电销售展示平台论文-java-文档-基于SpringBoot的家电销售展示平台文档

基于SpringBoot的家电销售展示平台论文-java-文档-基于SpringBoot的家电销售展示平台文档论文: !!!本文档只是论文参考文档! 需要项目源码、数据库sql、开发文档、毕设咨询等,请私信联系~ ① 系统环境:Windows/Mac ② 开发语言:Java ③ 框架:SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDEA、JDK、Maven、Mysql ⑥ JDK版本:JDK1.8 ⑦ Maven包:Maven3.6 ⑧ 数据库:mysql 5.7 ⑨ 服务平台:Tomcat 8.0/9.0 ⑩ 数据库工具:SQLyog/Navicat ⑪ 开发软件:eclipse/myeclipse/idea ⑫ 浏览器:谷歌浏览器/微软edge/火狐 ⑬ 技术栈:Java、Mysql、Maven、Springboot、Mybatis、Ajax、Vue等 最新计算机软件毕业设计选题大全 https://blog.csdn.net/weixin_45630258/article/details/135901374 摘 要 目 录 第1章 绪论 1.1选

面向6G的编码调制和波形技术.docx

面向6G的编码调制和波形技术.docx

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

Power BI中的数据导入技巧

# 1. Power BI简介 ## 1.1 Power BI概述 Power BI是由微软公司推出的一款业界领先的商业智能工具,通过强大的数据分析和可视化功能,帮助用户快速理解数据,并从中获取商业见解。它包括 Power BI Desktop、Power BI Service 以及 Power BI Mobile 等应用程序。 ## 1.2 Power BI的优势 - 基于云端的数据存储和分享 - 丰富的数据连接选项和转换功能 - 强大的数据可视化能力 - 内置的人工智能分析功能 - 完善的安全性和合规性 ## 1.3 Power BI在数据处理中的应用 Power BI在数据处

建立关于x1,x2 和x1x2 的 Logistic 回归方程.

假设我们有一个包含两个特征(x1和x2)和一个二元目标变量(y)的数据集。我们可以使用逻辑回归模型来建立x1、x2和x1x2对y的影响关系。 逻辑回归模型的一般形式是: p(y=1|x1,x2) = σ(β0 + β1x1 + β2x2 + β3x1x2) 其中,σ是sigmoid函数,β0、β1、β2和β3是需要估计的系数。 这个方程表达的是当x1、x2和x1x2的值给定时,y等于1的概率。我们可以通过最大化似然函数来估计模型参数,或者使用梯度下降等优化算法来最小化成本函数来实现此目的。

智能网联汽车技术期末考试卷B.docx

。。。