uniapp中scroll-view初始化的时候 无法横向滚动到某个为止

项目需求 实现日历(13天)默认高亮第六天 并定位到第六 左边右边各六天(可以滑动)
在这里插入图片描述

直接上代码

<template><scroll-view  class="scroll-X":show-scrollbar="true" :scroll-x="scrollable":scroll-left='scrollLeft' scroll-with-animation><view class='item ' :class='{active:isTabActive==index}' v-for="(item,index) in tabRl" :key='index'@click='rlChangeFn(item,index)' ><text class='tit'>{{item.weekdayName}} </text><text class='tx'>{{item.patrolDate}} </text></view></scroll-view>
</template>
<script>
export default {data() {return {scrollable:true,//横向滚动scrollLeft:0,//横向定位的默认位置 直接设置其他值不会定位到那个点isTabActive:6,//默认第几个高亮tabRl:[ //假设这些为后台请求回来的数据{"count": null,"weekdayName": "星期五","patrolDate": "2024-04-12"},{"count": null,"weekdayName": "星期六","patrolDate": "2024-04-13"},{"count": null,"weekdayName": "星期日","patrolDate": "2024-04-14"},{"count": "2","weekdayName": "星期一","patrolDate": "2024-04-15"},{"count": "49","weekdayName": "星期二","patrolDate": "2024-04-16"},{"count": "50","weekdayName": "星期三","patrolDate": "2024-04-17"},{"count": "59","weekdayName": "星期四","patrolDate": "2024-04-18"},{"count": "46","weekdayName": "星期五","patrolDate": "2024-04-19"},{"count": "46","weekdayName": "星期六","patrolDate": "2024-04-20"},{"count": "46","weekdayName": "星期日","patrolDate": "2024-04-21"},{"count": "47","weekdayName": "星期一","patrolDate": "2024-04-22"},{"count": "46","weekdayName": "星期二","patrolDate": "2024-04-23"},{"count": null,"weekdayName": "星期三","patrolDate": "2024-04-24"}]}},onShow() {this.scrollLeft=800//或者onLoad设置滚动的位置 否则无法定位到某个为止 这个值根据实际情况进行填写 我的项目计算出来时800},methods:{rlChangeFn(item,index){this.isTabActive=index//.....}}}
</script>
<style lang="scss">
.scroll-X {width: 500rpx; //自己根据实际情况设置height: 45rpx;border: 1rpx solid #D0D0D0;border-radius: 45rpx;overflow: hidden;white-space: nowrap; //**** 必须设置为这个 否则肯呢个会出现问题.item {display: inline-block;  //**** 必须设置为这个 否则肯呢个会出现问题padding: 10rpx 0;box-sizing: border-box;height: 100%;background: #FFFFFF;color: #333333;width: 100rpx;border-right: 1px solid #D0D0D0;.tit {display: block;text-align: center;width: 100%;font-size: 11rpx;color: #333333;width: 100%;}.tx {display: block;text-align: center;font-size: 11rpx;color: #333333;}}.active {background: #1765A6;.tit,.tx {color: #fff;}}
}
</style>

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

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

相关文章

OpenHarmony网络组件-Mars

项目简介 Mars 是一个跨平台的网络组件&#xff0c;包括主要用于网络请求中的长连接&#xff0c;短连接&#xff0c;是基于 socket 层的解决方案&#xff0c;在网络调优方面有更好的可控性&#xff0c;暂不支持HTTP协议。 Mars 极大的方便了开发者的开发效率。 效果演示 编译…

产废端实时音视频监控系统在运输车辆驾驶室中的应用

实时音视频监控系统可通过在运输车辆驾驶室安装音视频摄录设备&#xff0c;实现将运输车辆内部及周围环境音视频数据通过移动网络实时回传指挥中心的功能。 前端摄录设备主要负责采集车内外的视音频信息&#xff0c;为了保障车辆及运输人员 的安全&#xff0c;应合理选择摄录设…

【多线程】定时器 | 线程池 | 实现MyTimer | 实现MyThreadPoll | 工厂模式 | 构造方法 | 参数种类

文章目录 定时器&线程池一、定时器1.标准库中的定时器2.实现定时器 二、线程池1.线程池的概念线程池&#xff1a; 2.标准库当中的线程池工厂模式 Executors 创建线程池1.自适应线程池2.固定数量线程池3.只有单个线程的线程池4.设定延迟时间后执行命令的线程池 ThreadPoolEx…

BNB链融合

BNB Chain融合 BNB Chain目前有BNB智能链&#xff08;BSC&#xff09;&#xff0c;BNB信标链 BNB信标链&#xff1a;用作质押和投票的治理层&#xff0c;采用BEP-2代币标准BNB智能链(BSC)&#xff1a;用作EVM兼容层&#xff0c;提供DApp、DeFi服务、共识层、多链支持和其他Web3…

阿里云服务器上配置Docker 以及常用命令讲解

目录 一、认识docer二、在阿里云服务器上配置Docker三、底层原理4、常用命令&#xff08;1&#xff09;Docker中常见镜像命令&#xff08;2&#xff09;Docker中常见容器命令&#xff08;3&#xff09;日志查看命令&#xff08;4&#xff09;进入容器的命令与拷贝命令 一、认识…

【目标检测】Focal Loss

Focal Loss用来解决正负样本不平衡问题&#xff0c;并提升训练过程对困难样本的关注。 在一阶段目标检测算法中&#xff0c;以YOLO v3为例&#xff0c;计算置信度损失&#xff08;图中第3、4项&#xff09;时有目标的点少&#xff0c;无目标的点多&#xff0c;两者可能相差百倍…

009 springboot整合mybatis-plus 增删改查 ajax 登录退出accessToken

文章目录 ConfigRegistCenter.javaMybatisplusConfig.javaCustomerController.javaReceiveAddressJsonController.javaCustomer.javaLoginCustomer.javaReceiveAddress.javaJwtInterceptor.javaCustomerMapper.javaReceiveAddressMapper.javaCustomerServiceImpl.javaReceiveAd…

华为OD-C卷-路口最短时间问题[200分]Java 100%

题目描述 假定街道是棋盘型的,每格距离相等,车辆通过每格街道需要时间均为 timePerRoad; 街道的街口(交叉点)有交通灯,灯的周期 T(=lights[row][col])各不相同; 车辆可直行、左转和右转,其中直行和左转需要等相应 T 时间的交通灯才可通行,右转无需等待。 现给出…

【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

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

Rust入门-所有权与借用

一、为什么、是什么、怎么用 1、为什么Rust要提出一个所有权和借用的概念 所有的程序都必须和计算机内存打交道&#xff0c;如何从内存中申请空间来存放程序的运行内容&#xff0c;如何在不需要的时候释放这些空间&#xff0c;成为所有编程语言设计的难点之一。 主要分为三种…

java新冠病毒密接者跟踪系统(springboot+mysql源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的新冠病毒密接者跟踪系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 新冠病毒密接者跟…

Java垃圾回收1

1.对象什么时候可以被垃圾器回收 1.垃圾回收的概念 为了让程序员更专注于代码的实现&#xff0c;而不用过多的考虑内存释放的问题&#xff0c;所以&#xff0c; 在Java语言中&#xff0c;有了自动的垃圾回收机制&#xff0c;也就是我们熟悉的GC(Garbage Collection)。 有了垃圾…

2、MATLAB入门常用命令

一、退出和中断 exit和quit&#xff1a;结束MATLAB会话。程序完成&#xff0c;如果没有明确保存&#xff0c;则变量中的数据丢失。 Ctrl c&#xff1a;中断一个MATLAB任务。例如&#xff0c;当MATLAB正在计算或打印时&#xff0c;中断一个任务&#xff0c;但会话并没有结束。…

Flink CDC 整库 / 多表同步至 Kafka 方案(附源码)

本文讨论的方案将是本博客以往介绍的所有关于 CDC 数据同步方案中最贴合实际生产需要的,因为以往介绍的开箱即用方案往往都是一张表对应一个 Kafka Topic,在数据库和数据表数量很大的情况下,这种模式是不实用的,用户真正需要的是:将多张数据表或整个数据库写入到一个 Kafk…

Oracle入门——基础语法篇

01-表空间_用户创建 -- 查看当前用户 select user FROM dual;--创建表空间 --datefile 地址 --size --autoextend on --next create tablespace test datafile c:/data/test.dbf size 100m autoextend on next 10m;--创建用户 default tablespace 默认表空间 create user c##u…

麒麟服务器操作系统自动化安装应答文件制作

原文链接&#xff1a;麒麟服务器操作系统自动化安装应答文件制作 Hello&#xff0c;大家好啊&#xff01;今天我们将探讨如何为麒麟服务器操作系统制作自动化安装应答文件。在部署大量服务器时&#xff0c;自动化安装是提高效率和确保安装一致性的关键技术。通过使用应答文件&a…

云原生Kubernetes: K8S 1.29版本 部署Kuboard

目录 一、实验 1.环境 2.K8S 1.29版本 部署Kuboard (第一种方式) 3.K8S 1.29版本 部署Kuboard (第二种方式) 4.K8S 1.29版本 使用Kuboard 二、问题 1.docker如何在node节点间移动镜像 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 主机架构版本IP备注ma…

全量知识系统 程序详细设计之 刀具库钩子程序和胶水语言(QA 百度搜索)

Q1. 我们聊聊全量知识系统中的三大套&#xff1a;刀具库、钩子程序和胶水语言 全量知识系统中的三大套——刀具库、钩子程序和胶水语言&#xff0c;在软件开发和系统构建中扮演着至关重要的角色。这些概念在不同的技术背景下可能有所不同&#xff0c;但总体来说&#xff0c;它…

css3中有哪些伪选择器?

CSS3中有以下伪选择器&#xff1a; :active&#xff08;选中的元素处于活动状态&#xff09;:checked&#xff08;选中的表单元素&#xff09;:disabled&#xff08;禁用的表单元素&#xff09;:empty&#xff08;没有子元素的元素&#xff09;:enabled&#xff08;可用的表单…

Hive进阶(5)----yarn的资源调度策略

yarn的资源调度策略 YARN&#xff08;Yet Another Resource Negotiator&#xff09;是Apache Hadoop的资源管理器。它负责集群资源的管理和作业调度。YARN的资源调度是通过几个关键组件来实现的&#xff1a; ResourceManager&#xff08;RM&#xff09;&#xff1a;RM是YARN集群…