苹果文本动态高亮,滚动时候部分高亮不显示问题

news2024/11/18 15:22:57

很简单的需求:

一个文本容器固定大小,内容超出滚动,然后文本点击高亮,奇怪就是苹果微信打开会出现点击只会高亮能看见的区域文本,滚动部分不会显示,默认浏览器打开也不行,安卓没问题,那就是苹果兼容问题了,然后加班排问题…

问题复现组件代码:

<template>
  <ul class='box'>
    <li class="list" @click="handleCLick(item.id)" :class="{active:item.id===currentId}" v-for="item in list" :key="item.id">
      <!-- 直接文本会不正常 -->
  {{item.text}}
  <!-- span包裹有时候不正常,不知道为啥我有的组件会不行,有的可以,不知道为啥 -->
      <!-- <span>{{item.text}}</span> -->
      <!-- 用p标签包裹可以正常 -->
      <!-- <p>{{ item.text }}</p> -->
    </li>
  </ul>
</template>

<script>
export default {
  name: "bb",

  data() {
    return {
      list: [
        { id: 1, text: "文文本文本文本文本文本文文本文本文本文本文本文本本文文本文本文本文本文本文本本文文本文本文本文本文本文本本文本本" },
        { id: 2, text: "文文本文本文本文本文本文文本文本文本文本文本文本本文文本文本文本文本文本文本本文文本文本文本文本文本文本本文本本" },
        { id: 3, text: "文文本文本文本文本文本文文本文本文本文本文本文本本文文本文本文本文本文本文本本文文本文本文本文本文本文本本文本本" },
      ],
      currentId:1
    };
  },

  created() {},

  mounted() {},

  methods: {
    handleCLick(id) {
      this.currentId = id;
    }
  },
};
</script>

<style scoped lang='scss'>

.box {
  background: #fff;
  display: flex;
  margin: 30px 0 ;
}

.list {
  width: 100px;
  height: 80px;
  overflow: auto;
  margin: 5px;
}
.active {
  color: blue;
}
</style>

结果如下,这是我重新写个测试demo,默认高亮第一个,点击第二个高亮,滚动发现下面还是黑色,奇了怪了。
在这里插入图片描述
安卓没有问题,就苹果搞特殊,问AI说:
在这里插入图片描述
不过AI提供的是用IntersectionObserver去监听解决,先不说这个解决不了,就这么简单的高亮都有问题,说不过去啊。

最后解决:

发现问题是文本我没有用元素包裹苹果有问题:

<template>
 <ul class='box'>
    <li class="list" @click="handleCLick(item.id)" :class="{active:item.id===currentId}" v-for="item in list" :key="item.id">
  {{item.text}}
    </li>
  </ul>
  <template/>

最后尝试发现给文本包一层元素 p 标签就可以了,用span包可能有时候有问题,我有个组件就是不行,不过那个组件业务代码太多了不确定是其他因素影响,但是用p可以。

<template>
  <ul class='box'>
    <li class="list" @click="handleCLick(item.id)" :class="{active:item.id===currentId}" v-for="item in list" :key="item.id">
      <!-- 直接文本会不正常 -->
    <!--   {{item.text}}  -->
  <!-- span包裹有时候不正常,不知道为啥我有的组件会不行,有的可以,不知道为啥 -->
      <!-- <span>{{item.text}}</span> -->
      <!-- 用p标签包裹可以正常 -->
    <p>{{ item.text }}</p> 
    </li>
  </ul>
</template>

就这浪费我两个小时找原因,具体原理还不是很清楚,应该就是苹果问题

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

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

相关文章

10.RIP路由信息协议

10.RIP 网段经常产生变化的话&#xff0c;建议使用动态路由协议&#xff0c;当网段发生变化的时候会自动通告给其他路由器 它不看链路的带宽&#xff0c;只看链路中的跳数&#xff0c;只要是跳数多的&#xff0c;不管带宽有多大&#xff0c;它就认为是不好的 RIP跳数有限 …

外包干了3个月,技术退步明显。。。

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

第三节、项目支付功能实战-微信支付平台接入流程,小程序账号注册、商户注册

简介 本篇介绍小程序的注册流程、商户平台的注册流程、以及小程序和商户平台如何进行绑定。 微信小程序注册 由于项目中使用了小程序进行支付&#xff0c;所以首先来注册小程序。小程序注册网站如下&#xff1a;小程序注册地址 小程序账号注册 1、链接页面点击“前往注册”…

事务的四个特性、四个隔离级别以及数据库的常用锁

事务的四个特性、四个隔离级别以及数据库的常用锁 四大特性 事务的四大特性&#xff0c;通常被称为ACID特性&#xff0c;是数据库管理系统&#xff08;DBMS&#xff09;确保事务处理的关键属性。这四大特性分别是&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#x…

银河麒麟v10系统SSH远程管理及切换root用户的操作方法

&#x1f4da;&#x1f4da; &#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Linux》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一…

Python基础期末复习 新手 2

虽然age 10在__init__方法中定义了一个局部变量age&#xff0c;但这个局部变量并不会影响类属性age的值。类属性是在类级别上定义的&#xff0c;不属于任何一个实例。因此&#xff0c;在创建实例s1和s2时&#xff0c;它们的age属性值都为类属性的初始值0。 尽管对类的属性值进…

1.鸿蒙应用程序开发app_hap开发环境搭建

1.下载Node.js, Javascipts的运行环境 node.js版本下载v12.18.3/https://www.cnblogs.com/txwtech/p/17865780.html 2.下载并安装DevEco Studio DevEco Studio 3.1 DevEco Studio 3.1配套支持HarmonyOS 3.1版本及以上的应用及服务开发&#xff0c;提供了代码智能编辑、低代…

coding创建远程分支。并拉取远程新分支+推送代码

进入coding ----项目----代码仓库---点击 下拉之后查看全部----创建分支 创建分支之后执行下面命令 git branch -a // 查看所有分支 这个时候发现自己创建的分支没有显示这是因为自己在远程创建了分支但是本地还没有分支 执行 git fetch命令 用于从远程仓库获取最新的提交…

day33-37-SpringBootV12(整合Spring,SpringMVC,Mybatis,日志,api测试等框架)

ssm spring --> applicationContext.xml配置文件 springmvc --> springmvc.xml配置文件 mybatis —> mybatis-config.xml配置文件 —> springboot优化了之前的框架配置,思想是约定大于配置 一、引言 1.1 初始化配置 为了使用SSM框架去开发&#xff0c;准备SSM…

SpringBootWeb请求响应之前言及状态码的详细解析

SpringBootWeb请求响应 前言 在上一次的课程中&#xff0c;我们开发了springbootweb的入门程序。 基于SpringBoot的方式开发一个web应用&#xff0c;浏览器发起请求 /hello 后 &#xff0c;给浏览器返回字符串 “Hello World ~”。 其实呢&#xff0c;是我们在浏览器发起请求…

孩子还是有一颗网安梦——Bandit通关教程:Level0

&#x1f575;️‍♂️ 专栏《解密游戏-Bandit》 &#x1f310; 游戏官网&#xff1a; Bandit游戏 &#x1f3ae; 游戏简介&#xff1a; Bandit游戏专为网络安全初学者设计&#xff0c;通过一系列级别挑战玩家&#xff0c;从Level0开始&#xff0c;逐步学习基础命令行和安全概念…

JAVA定时任务技术总结

在日常的项目开发中&#xff0c;多多少少都会涉及到一些定时任务的需求。例如每分钟扫描超时支付的订单&#xff0c;每小时清理一次数据库历史数据&#xff0c;每天统计前一天的数据并生成报表&#xff0c;定时去扫描某个表的异常信息&#xff08;最终一致性的方案也可能涉及&a…

五.单行函数

单行函数 1.函数的理解1.1什么是函数1.2不同DBMS函数的差异1.3MySQL的内置函数分类 2.数值函数2.1基本函数2.2角度与弧度互换函数2.3三角函数2.4指数与对数2.5进制间的转换 3.字符串函数4.日期和时间函数4.1获取日期、时间4.2日期与时间戳的转换4.3获取月份、星期、星期数、天数…

CentOS上配置和管理HTTP服务器的工具和实用程序

在CentOS系统上&#xff0c;有多个工具和实用程序可以帮助你配置和管理HTTP服务器。以下是一些常用的工具和实用程序&#xff1a; Apache HTTP服务器&#xff1a; Apache是CentOS上最常用的HTTP服务器之一。它是一个开源的Web服务器软件&#xff0c;具有高度的可配置性和可扩…

西工大网络空间安全学院计算机系统基础实验二(phase_2上——死寂的长夜)

自从西工大网络空间安全学院计算机系统基础实验二&#xff08;清楚实验框架及phase_1&#xff09;-CSDN博客这篇文章之后&#xff0c;我们获取了phase_1的答案字符串&#xff0c;如 图1&#xff1a;phase_1的答案字符串 所示&#xff0c;注意每个人的答案字符串可能都不一样。接…

将程序注册为系统服务

cmd中执行命令&#xff1a; sc create Redis binpath "C:\guet_run1\Redis-x64-5.0.14.1\redis-server.exe" type own start auto displayname "Redis"注意&#xff0c;命令中所有的等号和值之间需要一个空格&#xff08;等号前不要空格&#xff0c;等号后…

论文怎么改才能降低重复率

一、引言&#xff1a;智能工具助力&#xff0c;轻松降低论文重复率 论文的重复率是学术写作中的重要问题&#xff0c;如何有效降低重复率成为了许多研究者的关注焦点。如今&#xff0c;智能工具的发展为我们提供了更多选择。本文将介绍几种实用的智能工具&#xff0c;包括快码…

(附源码)基于ssm校园体育设施管理系统小程序-计算机毕设 70715

ssm校园体育设施管理系统小程序 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;校园体育设施管理系统小程…

zookeeper2==zookeeper源码阅读,集群如何选举出LEADER

上一篇已经搭建好了环境&#xff0c;这篇研究下集群是怎么进行选举的。 源码分析&#xff1a; 首先将三台机器的data目录下除了myid之外的都清掉&#xff0c;从零开始启动。 先启动ZK1 然后顺着main阅读源码 org.apache.zookeeper.server.quorum.QuorumPeer#start org.apac…

智能优化算法应用:基于蝗虫算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蝗虫算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蝗虫算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝗虫算法4.实验参数设定5.算法结果6.参考文献7.MA…