解决uniapp里scroll-view横向滚动的问题
一、前言
本以为是一件很简单的事,结果浪费了整整一个上午,并且问题并没有全部解决....后来没办法,用了touchmove模拟的滑动,如果有好的解决方法麻烦告诉我...非常感谢~
一、问题
其实我想要实现的功能很简单,就是一个横向滚动条,能按住里面的东西进行横向滚动...
1.1 问题描述
遇到的问题一共两个:
- scroll-view没有生效,无法拖动;
- scroll-view本身可以拖动,但按住子节点无法拖动(该问题未解决);
二、解决
2.1 scroll-view没有生效
这个问题很好解决,通过查询资料得知,如果想要scroll能横向滚动有一个参数是需要设定的
- scroll-x比如设定为true;
- 子集肯定是不能换行的,因此,不管使用CSS
white-space: nowrap;
还是使用其他的方法,内容必然要超出scroll-view才可能使用滑动;这两个点完成后按住scroll-view本身是可以进行拖动的;
2.2 按住子元素无法拖动
这个不知道怎么解决,因为我并没有写什么阻止冒泡的事件,而且,官网上的示例中也没有办法按住内容进行左右拖动,

没办法,因此,我使用了touchmove来代替,大致代码如下
点击时保存坐标;
export function touchstart(e: TouchEvent) {e.preventDefault();if (!e || !Array.isArray(e.changedTouches) || !e.changedTouches.length) return;startX_ = e.changedTouches[0].clientX;startY_ = e.changedTouches[0].clientY;
}
拖动时,取得x轴上的移动距离
export function touchmoveFn(e: TouchEvent) {if (!e || !Array.isArray(e.changedTouches) || !e.changedTouches.length) return 0;const startY = startY_;const moveY = e.changedTouches[0].clientY;return startY - moveY;
}
然后将移动的距离赋值给scroll-left
<scroll-view :scroll-x="true" :scroll-left="distance">
</scroll-view>
以这种方式模拟了横向滚动,但是从个人直觉上来说这是不正确的,scroll-view本身应该是支持子级的横向滚动的,但不知道该如何配置,如果有小伙伴知道麻烦告知一些,谢谢~
相关文章:
解决uniapp里scroll-view横向滚动的问题
一、前言 本以为是一件很简单的事,结果浪费了整整一个上午,并且问题并没有全部解决....后来没办法,用了touchmove模拟的滑动,如果有好的解决方法麻烦告诉我...非常感谢~ 一、问题 其实我想要实现的功能很简单,就是一…...
LeetCode——动态规划(五)
刷题顺序及思路来源于代码随想录,网站地址:https://programmercarl.com 目录 121. 买卖股票的最佳时机 - 力扣(LeetCode) 122. 买卖股票的最佳时机 II - 力扣(LeetCode) 123. 买卖股票的最佳时机 III …...
与HTTP相关的各种概念
网络世界 网络世界中最重要的一个名词就是互联网(Internet),它以TCP/IP协议族为基础,构建成了一望无际的信息传输网络。而我们通常所说的“上网”,主要就是访问互联网的一个子集——万维网(World Wide Web)…...
CentOS 7 编译安装Boost
1、前提条件 linux平台/CentOS 7 下要编译安装Boost除gcc和gcc-c之外,还需要两个开发库:bzip2-devel 和python-devel ,因此在安装前应该先保证这两个库已经安装。 安装指令: yum install bzip2 bzip2-devel bzip2-libs python-devel Cent…...
vue图表制作
Vue.js是一个非常流行的JavaScript框架,可以用于开发交互式Web应用程序。Vue.js的优点之一是它的灵活性和可扩展性。因此,可以使用Vue.js与许多其他库和框架集成,包括图表库。 下面是使用Vue.js制作图表的一些步骤: 1.选择一个适…...
使用 GitHub Action 自动更新 Sealos 集群的应用镜像
在 IT 领域,自动化无疑已成为提高工作效率和减少人为错误的关键。Sealos 作为一个强大的云操作系统,已经为许多企业和开发者提供了稳定可靠的服务。与此同时,随着技术不断发展,集成更多的功能和服务变得尤为重要。考虑到这一点&am…...
windows频繁更新问题解决方案
解决方案:将更新策略增加到无穷大 1.windowsr 输入regedit 2.找到:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 3.右键新建DWORD32 4.命名:FlightSettingsMaxPauseDays 5.双击:数值数据改为4321 基数&#…...
day05-前后端项目上传到gitee、后端多方式登录接口、发送短信功能、发送短信封装、短信验证码接口、短信登录接口
1 前后端项目上传到gitee 2 后端多方式登录接口 2.1 序列化类 2.2 视图类 2.3 路由 3 发送短信功能 4 发送短信封装 4.0 目录结构 4.1 settings.py 4.2 sms.py 5 短信验证码接口 6 短信登录接口 6.1 视图类 6.2 序列化类 1 前后端项目上传到gitee # 我们看到好多开源项目…...
046:mapboxGL加载天地图路网图+标记(wmts方式)
第046个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中加载天地图路网图+标记(wmts方式)。瓦片中的url地址引用的是天地图的wmts的形式。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共99行)相关AP…...
【ICer的脚本练习】tcl语法熟悉和工具tcl的实例
系列的目录说明请见:ICer的脚本练习专栏介绍与全流程目录_尼德兰的喵的博客-CSDN博客 前言 TCL(Tool Command Language)是一种简单但功能强大的脚本语言,它经常用于自动化任务、测试和快速原型开发。你看这个名字就能知道,这个语言最主要的作用就是用来操作工具,尤其我们…...
uniapp+vue3+ts+uview-plus搭建项目步骤
创建项目 使用Vue3/Vite版,创建以 typescript 开发的工程 下载仓库 DCloud/uni-preset-vue - Gitee.com node版本:v16.18.0 npm版本: v8.19.2 依赖下载 解压之后,在vscode打开 通过终端运行 npm 命令下载依赖:npm ins…...
在PHP中,可以使用不同的加密算法(如MD5、SHA1、SHA256)结合RSA算法进行公钥加密和私钥解密。
下面是使用这三种算法进行加密和解密的示例代码: // 生成RSA密钥对 $keyPair openssl_pkey_new(array(private_key_bits > 2048,private_key_type > OPENSSL_KEYTYPE_RSA, ));// 获取私钥和公钥 openssl_pkey_export($keyPair, $privateKey); $publicKey o…...
第六章:路由交换机及操作系统
路由交换机及操作系统 一、路由器与交换机的作用与特点1.路由器1.1 作用1.2 特点 2.交换机2.1 作用2.2 特点 二、H3C路由器与交换机介绍1. 路由器2. 交换机 三、 H3C网络设备操作系统Comware1. 介绍2. 特点全方位性能测试
Kafka SASL认证授权(六)全方位性能测试。 官网地址:https://kafka.apache.org/ 一、场景 线上已经有kafka集群,服务运行稳定。但是因为产品升级,需要对kakfa做安全测试,也就是权限验证。 但是增加权限验证,会不会对性能有影响呢?影响大吗?不知道呀! 因此,本文就此…...
基于nodejs+vue校园失物招领平台设计与实现
科学技术日新月异的如今,计算机在生活各个领域都占有重要的作用,尤其在信息管理方面,在这样的大背景下,学习计算机知识不仅仅是为了掌握一种技能,更重要的是能够让它真正地使用到实目 录 摘 要 I ABSTRACT II 目 录 II…...
Open Winding-PMSM-开绕组永磁同步电机基本介绍
文章目录 前言简介Open Widing电机数学模型零序模型 双逆变器调制零序电流抑制基本思路 前言 最近看了些Open Winding永磁同步电机及其控制策略的文献资料,现做个总结。未来的研究方向也大概率围绕Open Winding开展,期待同行交流学习。 简介 开绕组(O…...
uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile
方式 一 部分安卓机 只能一条一条传视频 文档地址 uview 2.0 Upload 上传组件 html <view class"formupload"><u-upload accept"video":fileList"fileList3" afterRead"afterRead" delete"deletePic" name"…...
CentOS7卸载硬盘报错:umount: /data: target is busy.
问题描述 umount: /data: target is busy. 问题分析 硬盘正在被使用,不能被卸载。 解决方案 查看哪些程序在使用硬盘 [rootlocalhost ~]# lsof /data/ COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME mysqld 15655 polkitd cwd …...
Chrome插件精选 — 鼠标手势插件
Chrome实现同一功能的插件往往有多款产品,逐一去安装试用耗时又费力,在此为某一类型插件记录下比较好用的一款或几款,便于节省尝试的时间和精力。 下面是两款比较好用的鼠标手势插件,支持很多设置选项,可以自定义手势&…...
JMeter分布式
一 分布式注意事项 关闭防火墙控制机和代理机在同一子网控制机和代理机上安装的jmeter和JDK版本要一样关闭jmeter的RMI SSL开关 二 代理机(agent)的配置 修改服务端口 打开bin/jmeter.properties文件,修改’server_port’ 将RMI SSL设备…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
