uniapp小程序使用scroll-view组件实现上下左右滚动触发事件

在做uniapp开发小程序的时候,有一个需求是在一个表格区域里面可以上下左右滑动元素,并实现表头和左侧的标签联动效果,就想趣运动里面选择场地的效果一样,这里就用到了scroll-view组件,scroll-view官网文档地址:scroll-view | uni-app官网

但是使用的时候,要注意:

使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给<scroll-view>添加white-space: nowrap;样式。

就因为这个配置,就会导致你的滚动事件不会触发,所以一定要配置相应的宽度和高度!

代码:

                    <!-- 场地信息 --><scroll-viewclass="scrollField"scroll-x="true"scroll-y="true"@scroll="touchMove"><view class="placeInfo"><view class="column" v-for="p in 15"><view v-for="cell in timeLabel" class="cell">¥300</view></view></view></scroll-view>const touchMove = (event) => {console.log('handleTouchmove', event)
}

 css代码:

        .scrollField {height: 500rpx;}.placeInfo {display: flex;flex-direction: row;.column {.cell {width: 100rpx;background-color: #c2a3f2;margin: 4rpx;border-radius: 4rpx;text-align: center;color: white;}}}

最后实现的效果就是不论左右还是上下都可以触发滚动事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/706330.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

积温空间分布数据、气温分布数据、日照数据、降雨量分布、太阳辐射数据、地表径流数据、土地利用数据、npp数据、ndvi数据

引言 积温是某一时段内逐日平均气温之和,它是研究植物生长、发育对热量的要求和评价热量资源的一种指标,是影响植物生长的重要因素之一&#xff0c;对指导农业生产和生态建设具有非常重要的意义。作为重要的气候资源&#xff0c;积温与其它资源的区别在于存在很大的地域差异和时…

Mamba:7 VENI VIDI VICI

若在阅读过程中有些知识点存在盲区&#xff0c;可以回到如何优雅的谈论大模型重新阅读。另外斯坦福2024人工智能报告解读为通识性读物。若对于如果构建生成级别的AI架构则可以关注AI架构设计。技术宅麻烦死磕LLM背后的基础模型。 序列模型的效率与有效性之间的权衡取决于状态编…

解决GitHub提交后不显示自己的头像 显示另一个没见过的账号?

问题说明 最近换了几台电脑开发项目&#xff0c;提交到github&#xff0c;看了下提交记录&#xff0c;怎么冒出来不是我的账号头像&#xff1f; 什么鬼i 原因分析 github是按照你注册时候填的邮箱来查找账号&#xff0c;并显示在提交记录上面的。如果账号找不到头像就出不来…

停车场车位引导管理系统工作原理是什么,由哪些软硬件设备组成?

在现代城市中&#xff0c;随着汽车保有量的持续增长&#xff0c;停车难成为了许多城市面临的共同问题。有效管理停车场资源&#xff0c;提高车位利用率&#xff0c;减少寻找停车位的时间&#xff0c;对于缓解交通拥堵、提高城市运行效率具有重要意义。车位引导管理系统正是为了…

1755jsp学生信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 学生信息管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;…

【Oracle篇】rman物理备份工具的基础理论概述(第一篇,总共八篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&am…

齐护K210系列教程(二十七)_语音识别

语音识别 1.烧录固件和模型2.语音识别程序2.1训练并识别2.2使用本地文件语音识别 3.课程资源联系我们 1.烧录固件和模型 注&#xff1a;本应用只适用于有麦克风功能的型号&#xff1a;AIstart_pro、AIstart_掌机、AIstart_Mini, 其它型号不支持&#xff01; 机器码生成以及模…

vue2人力资源项目9权限管理

页面搭建 <template><div class"container"><div class"app-container"><el-button size"mini" type"primary">添加权限</el-button><el-table-column label"名称" /><el-table-co…

基于EBAZ4205矿板的图像处理:05均值滤波算法

基于EBAZ4205矿板的图像处理&#xff1a;05均值滤波算法 项目全部文件已经上传&#xff0c;是免费的 先看效果 可以明显看到图像变糊了&#xff0c;这就是均值滤波的特点&#xff0c;将噪声均摊到每个点上的同时&#xff0c;也会让图像丢失细节。 算法讲解 均值滤波&#x…

【c++】map和set的封装

1.红黑树源码 我们使用上节课的红黑树源码来封装map和set. 因为map存的是&#xff08;key,value&#xff09;,set存的是&#xff08;key&#xff09;,为了我们set和map使用同一个类模板&#xff08;红黑树&#xff09;&#xff0c;所以我们先要修改红黑树结点中存的数据类型&a…

51单片机入门:I2C通讯协议

I2C通讯协议 I2C简介 串口通信只能在两个设备之间进行&#xff0c;如果是三个设备相互通讯&#xff0c;那么每个设备需要两组串口&#xff0c;实际上是3组相互独立的串口通信。如果是4个设备相互通信就更加麻烦了&#xff0c;最突出的问题就是线路连接比较复杂。 为了解决这个…

迈向数字化生产:MES系统的重要性与功能解析

在传统的加工生产企业中&#xff0c;流程卡一直是进行生产跟踪控制的主要工具。流程卡上印刷了工序列表&#xff0c;每个工序都需要作业人员打勾、签名并标注日期&#xff0c;以确保产品在生产线上经过所有必要的工序。 然而&#xff0c;随着信息技术的发展&#xff0c;制造业也…