当前位置: 首页 > news >正文

【小程序】指定元素滚动到中间

vue代码

<scroll-view scroll-x class="type_scroll" :scroll-left="cho_nu"><block v-for="(item, index) in vehicle_types" :key="index"><view :id="'type_item_' + index" :class="['type_item', index == active_popup_type && 'active']"@tap.stop="popup_type(index)"><text class="type_name">{{ item.name }}</text></view></block>
</scroll-view>

js代码

// 滚动到指定位置
scroll_to_cho: function (index) {console.log("scroll_to_cho", index);var that = this;var old_left = that.cho_nu;this.$nextTick(function () {setTimeout(function () {// 获取所有类型项的位置信息var query = uni.createSelectorQuery().in(that);query.selectAll(".type_scroll").scrollOffset(); //scrollLeftquery.selectAll(".type_scroll").boundingClientRect(); //widthquery.selectAll("#type_item_" + index).boundingClientRect(); //width leftquery.exec(function (rects) {if (!rects[0] ||rects[0].length == 0 ||!rects[1] ||rects[1].length == 0 ||!rects[2] ||rects[2].length == 0)return;var box_so = rects[0][0]; //滚动容器var box_rect = rects[1][0]; //滚动容器var el_rect = rects[2][0]; //子元素var center = (el_rect.width - box_rect.width) / 2;var calc = box_so.scrollLeft + el_rect.left + center;if (old_left != calc) {that.cho_nu = old_left;that.cho_nu = calc;}});}, 30);});
},
http://www.dtcms.com/a/524433.html

相关文章:

  • 百度PaddleOCR-VL:基于0.9B超紧凑视觉语言模型,支持109种语言,性能超越GPT-4o等大模型
  • (论文速读)InteractVLM: 基于2D基础模型的3D交互推理
  • 网络基础知识简易急速理解---OSPF开放式最短路径优先协议
  • VTK入门:vtkImageData——3D体素/2D像素的“规则收纳盒”
  • 插入区间--leetcode
  • 网络构建与访问控制实验
  • 利用建e网全景生成VR全景链接
  • 【项目与八股】复习整理笔记
  • 企业门为什么要建设门户网站天津进口网站建设电话
  • OGNL语法实践
  • 二叉树的直径,二叉树中的最大路径和
  • 【无标题】Verilog中generate的用法
  • 代码随想录 105.从前序与中序遍历构造二叉树
  • 微信网站公司用wordpress还是用框架
  • 电子电气架构 --- 汽车软件开发基础V模型
  • 国产数据库替代MongoDB的技术实践过程:金仓多模数据库在电子证照系统中的深度应用
  • 【MATLAB例程】自适应渐消卡尔曼滤波,背景为二维雷达目标跟踪,基于扩展卡尔曼(EKF)|附完整代码的下载链接
  • 【开题答辩全过程】以 博客系统的设计与实现为例,包含答辩的问题和答案
  • 基于 OpenHarmony 分布式数据服务重构 BCI 脑机接口通信系统
  • 投资交易网站开发商标图案大全大图 logo
  • 甘肃住房和城乡建设局网站宁波公司建网站哪家好
  • LangChain第三页【操作指南】_【如何创建一个自定义对话模型类】翻译完成
  • 专题:2025AI+直播+私域电商行业洞察报告|附200+份报告PDF、数据仪表盘汇总下载
  • 贝锐蒲公英R300S升级:内置三网通卡,联通、电信、移动智能切换
  • 拼接显示技术方案介绍:重塑视觉体验,赋能多元场景
  • 个人博客网站的建设结构图域名解析后怎么建网站
  • python做网站项目购物平台推荐
  • C语言需要掌握的基础知识点之链表
  • 学习Docker前提:多环境安装Docker
  • SpringBoot实战(三十九)集成 FreeMarker