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;两者可能相差百倍…

【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;但会话并没有结束。…

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

原文链接&#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…

太阳能路灯光伏板的朝向设计问题

题目&#xff1a;太阳能路灯光伏板的朝向设计问题 难度对标几乎每一年的国赛A题。 QQ群&#xff1a;592697532 公众号&#xff1a;川川菜鸟 文章目录 背景问题问题一问题二问题三 题目解读相关公式&#xff08;必备&#xff09;太阳辐射的计算光伏板接收的辐射光学效率大 气透…

Spring Cloud Gateway详细介绍以及实现动态路由

一. 简介 Spring Cloud Gateway This project provides a libraries for building an API Gateway on top of Spring WebFlux or Spring WebMVC. Spring Cloud Gateway aims to provide a simple, yet effective way to route to APIs and provide cross cutting concerns to …

C++的线程

#include<iostream> #include<thread> #include<unistd.h> using namespace std; void myrun() {while(true){cout<<"I am a thread"<<endl;sleep(1);} } int main() {thread t(myrun);t.join();return 0; } 如果不添加-lpthread就会报…

基于ChatGPT打造安全脚本工具流程

前言 以前想要打造一款自己的工具&#xff0c;想法挺好实际上是难以实现&#xff0c;第一不懂代码的构造&#xff0c;只有一些工具脚本构造思路&#xff0c;第二总是像重复造轮子这种繁琐枯燥工作&#xff0c;抄抄改改搞不清楚逻辑&#xff0c;想打造一款符合自己工作的自定义的…

Day 25 组合(优化)216.组合总和III 17.电话号码的字母组合

组合&#xff08;优化&#xff09; 先给出组合问题的回溯部分代码&#xff1a; vector<vector<int>> result; // 存放符合条件结果的集合vector<int> path; // 用来存放符合条件结果void backtracking(int n, int k, int startIndex) {if (path.size() k) …

【opencv】dnn示例-person_reid.cpp 人员识别(ReID,Re-Identification)系统

ReID(Re-Identification&#xff0c;即对摄像机视野外的人进行再识别) 0030_c1_f0056923.jpg 0042_c5_f0068994.jpg 0056_c8_f0017063.jpg 以上为输出结果&#xff1a;result文件夹下 galleryLIst.txt queryList.txt 模型下载&#xff1a; https://github.com/ReID-Team/ReID_e…

OpenHarmony网络通信-socket-io

简介 socket.io是一个在客户端和服务器之间实现低延迟、双向和基于事件的通信的库。建立在 WebSocket 协议之上&#xff0c;并提供额外的保证&#xff0c;例如回退到 HTTP 长轮询或自动重新连接。 效果展示 下载安装 ohpm install ohos/socketio OpenHarmony ohpm 环境配置等更…