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.hqwc.cn/news/630506.html

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

相关文章

Mac电脑版鼠标连点工具 RapidClick for Mac

RapidClick for Mac是一款方便实用的自动点击工具&#xff0c;可以帮助Mac用户在使用电脑时轻松、快速地进行鼠标操作。它可以模拟人类手指点击的动作&#xff0c;让您的鼠标点击变得更加快捷高效&#xff0c;大大提升了工作和游戏的效率。 RapidClick for Macv1.5.1激活版下载…

LangChain LangServe 学习笔记

LangChain LangServe 学习笔记 0. 引言1. LangServe 概述2. 特性3. 限制4. 安装5. 示例应用程序6. OpenAPI文档7. Python SDK 客户端8. Playground9. 聊天可运行页面 0. 引言 使用 LangServe 可以立即将您的LLM应用程序变成 API 服务器。 LangServe 使用 FastAPI 构建&#x…

微信小程序之点击事件

微信小程序中常用的点击事件主要是 tap&#xff0c;但除此之外还有其他的触摸类事件&#xff0c;用于不同的交互场景。以下是一些常见的点击和触摸相关的事件及其区别&#xff1a; 1、tap——最基本的点击事件&#xff0c;适用于一般的轻触交互&#xff0c;类似于 HTML 中的 c…

使用Python工具库SnowNLP对评论数据标注(二)

这一次用pandas处理csv文件 comments.csv import pandas as pd from snownlp import SnowNLPdf pd.read_csv("C:\\Users\\zhour\\Documents\\comments.csv")#{a: [1, 2, 3], b: [4, 5, 6], c: [7, 8, 9]}是个字典 emotions[] for txt in df[sentence]:s SnowNLP(…

低噪声放大器是如何实现低噪声放大的功能的

灵敏度作为接收机最重要的指标之一,直接决定了接收机能分辨的最小信号。接收机的灵敏度计算公式如下所示。 Psensitivity=-174dBm+NF+10*lg(BW)+SNR 由接收机灵敏度的计算公式可知,影响接收机灵敏度的指标有噪声系数、带宽和信噪比,因此一旦带宽和信噪比确定了,那么能决…

计算机网络 -- 网络编程基础

一 学习准备 1.1 IP地址 在 前文中我们提到过: IP 是全球网络的基础&#xff0c;使用 IP 地址来标识公网环境下主机的唯一性&#xff0c;我们可以根据 目的IP地址 进行跨路由器的远端通信。 但是我们也提到了&#xff0c;通过 IP 地址&#xff0c;只能寻找到目标主机&#xff…

iOS 全平台矢量动画库:体积小巧、功能丰富 | 开源日报 No.227

airbnb/lottie-ios Stars: 24k License: NOASSERTION lottie-ios 是一个用于在 iOS 平台上本地渲染 After Effects 矢量动画的库。 该项目主要功能、关键特性、核心优势包括&#xff1a; 跨平台支持&#xff1a;可在 iOS, macOS, tvOS, visionOS, Android 和 Web 上使用实时渲…

ElasticSearch:基础操作

一、ES的概念及使用场景 ElasticSearch是一个分布式&#xff0c;高性能、高可用、可伸缩、RESTful 风格的搜索和数据分析引擎。通常作为Elastic Stack的核心来使用 我们通过将ES 和 mysql对比来更好的理解 ES&#xff0c;ES和mysql相关的基本概念的对比表格如下&#xff1a; …

查询服务器上所有SQL SERVER数据库中是否包含某个字段,且该字段是否包含某个值

公司有一堆相同类别的客户&#xff0c;每个客户都部署了相同的一套系统&#xff0c;每套系统对应一个相同结构的数据库&#xff0c;昨天老板让查一下手机号码177xxxxx248是属于哪个客户的客户。 我要查的这个号码来自于oa_member表中的phone字段&#xff0c;我需要对所有的数据…

基于Spring Boot+Vue的校园网上店铺,开启便捷购物新模式

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

Java内存模型和 JVM 内存运行时

文章目录 前言一、什么是Java 的内存模型&#xff1f;二、什么是 JVM 的运行时数据区Java8 之前和之后的区别JVM 内存模型JVM 内存区域JVM 内存垃圾回收JVM如何判断哪些对象不在存活&#xff1f;JVM运行过程中如何判断哪些对象是垃圾&#xff1f; JVM 垃圾回收Java8 中的 jvm如…

leetcode刷题(python)——(四)

01.02.03 练习题目&#xff08;第 04 天&#xff09; 1. 0048. 旋转图像 1.1 题目大意 描述&#xff1a;给定一个 n n n \times n nn 大小的二维矩阵&#xff08;代表图像&#xff09; m a t r i x matrix matrix。 要求&#xff1a;将二维矩阵 m a t r i x matrix matr…