vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画

HuiRonmantic

已于 2024-05-22 10:07:18 修改

阅读量137

点赞数

分类专栏：大前端文章标签： vue.js javascript 前端

于 2023-01-06 10:58:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/128574847

版权

大前端专栏收录该内容

35 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中，如何在双层for循环的场景下，实现点击孙子元素使得该元素平滑滚动到页面的可视区域。通过使用scrollIntoView()方法，结合Vue实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用scrollIntoView( ) 方法，vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画

效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/f3b1107f987345cbb2920b373a67dc9b.png

代码：

左侧DOM部分

<div class="questionBox">
	  <div v-for="(itemA, indexA) in parentList" :key="indexA">
		<div v-for="(itemB, indexB) in itemA.childrenList" :key="indexB">
		  <div :id="`scorllView${index}${index1}`" class="boxFlex">
			<div class="container">

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HuiRonmantic

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

前端学习（1881）vue之电商管理系统电商系统之双层for循环渲染数据

歌谣的博客

08-07

286

目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' Vue.use(Router) const router= new Router({ routes:[ {path:'/',redirect:'/login'}...

TP源码。

04-02

- **动画（`animation`）**：允许更复杂的动画效果，包括多个关键帧、循环播放等高级特性。 #### 5. 使用 CSS3 动画制作卡牌翻转效果可以通过组合 `transition` 和 `transform` 来实现卡牌翻转效果。例如： ```...

参与评论您还未登录，请先登录后发表或查看评论

Vue的v-for双层循环

leilei__66的博客

03-27

1万+

vue的v-for双层循环结构嵌套的父子循环 item表示当前的数据，index表示索引 key的作用：帮助Vue区分不同的元素，从而提高性能 in 后面表示遍历的数组 <div id="app"> <ul v-for="(item, index) in list1" :key="index"> <li v-for="(i, d) in item.listitem" :key="d">{{i.name}}</li>

vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验

铁锤妹妹的博客

07-12

7335

有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。

Vue组件里面的双重循环

qq_63507998的博客

05-06

435

要注意这里的{{el.name}}两次是拿到的不同的值。

vue——双层循环嵌套

菜鸟技术员

12-28

3174

实现的效果为双层嵌套v-for，比如：三个滑动块，每个滑动块有3条数据，如图效果，所以我们需要大循环三次，大循环里面再循环3次呈现数据。这是数据代码 // 热门推荐 recommend:[ { "Items": [ {thumb:'images/p1.png',title:'电脑娱乐游戏电',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.bao

vue中的双重for循环

weixin_43992359的博客

12-22

4897

举例说明 this.tablebottombox中的数据是这样的表头表格数据效果图代码是这样的 {{ item[headItem.fieldName] }}

vue 双重for循环

sinat_38992528的博客

05-26

1231

<ul class="appList"> <li v-for="(item,key) in appList" :key="key"> <img :src="item.icon" :alt="item.name" /> <p>{{item.name}}</p> <div> <span v-for="(tagItem,key) in item.tags" :.

vue 双for循环

weixin_46907923的博客

05-27

1498

vue 双for循环

vue 双层v-for循环多级表头循环外包包裹template

weixin_37806636的博客

12-13

379

不加模版吧标签循环会报错。

vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

10-18

今天小编就为大家分享一篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach()，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue-for循环嵌套操作示例

10-17

主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下

vue 双层循环显示

qq_22656655的博客

07-21

1122

昨天项目要求做一个循环嵌套动态改动显示的。。嗯第一层可以正常显示，第二层就是无法正常显示，最终找出问题症结，原来是自己给的数据格式不对，这里记录一下： <vxe-form-item style="background-color: #f56c6c" :span="24" v-for="(item,index) in company.contractList" :key="'contract'+index"> <vxe-form-item title="常用联.

vue的双重循环

weixin_42598901的博客

08-31

5202

重点：key选项一定要有，o,index, part,n均可以更改 <ul v-show="showlList===1"> <li v-for="(o,index) in goodsInvolved" :key="index" style="margin-bottom:20px;display:inline-block;"> &l

【 vue 循环动画渐显】

qq_42822849的博客

03-23

337

【代码】【 vue 循环动画渐显】

Vue项目通过scrollIntoView实现锚点点击页面平滑滚动

最新发布

12-31

### 微信小程序 `wx:for` 实现双重循环在微信小程序中，通过使用 `wx:for` 指令可以方便地实现数据列表的渲染。对于双重循环的需求，可以通过在外层和内层分别应用 `wx:for` 来达成目标。 #### 外层循环外层循环负责遍历题目集合，每一个元素代表一道完整的单选题。假设存在一个名为 `questions` 的数组，其中包含了多个对象，每个对象表示一题及其选项[^4]。 ```html <view wx:for="{{questions}}" wx:key="id">  </view> ``` 这段代码定义了一个视图容器 `<view>` ，它将会被重复创建多次，每次对应于 `questions` 数组中的一个成员。属性 `wx:key` 提供了一种方式来提高性能并帮助框架识别哪些项目已被修改、添加或移除[^3]。 #### 内层循环为了展示每一题下的具体选项，可以在上述模板内部再嵌套一层带有 `wx:for` 属性的新标签，用来迭代当前题目内的选项列表： ```html <view wx:for="{{questions}}" wx:key="id"> <text>{{item.questionText}}</text>  <block wx:for="{{item.options}}" wx:key="index">  <label class='radio'> <radio value="{{index}}"/> {{option}} </label> </block> </view> ``` 此处引入了新的变量名 `options` 和 `questionText` 假设它们存在于每条记录之中；而 `{{index}}` 是由内置函数自动生成的位置索引值，可用于唯一标识各个选项。 #### 完整实例下面给出的是一个更具体的例子，展示了如何利用双重 `wx:for` 构建包含若干个具有不同选项集的问题界面结构： ```json // data.js 中的数据模型示例 Page({ data: { questions: [ { id: 'q1', questionText: "What is the capital of France?", options: ["Paris", "Berlin", "Madrid"] }, { id: 'q2', questionText: "Which planet has rings around it?", options: ["Earth", "Mars", "Saturn"] } ] } }) ``` ```html  <view wx:for="{{questions}}" wx:key="id" style="margin-bottom: 20px;"> <text>{{item.questionText}}</text><br/> <block wx:for="{{item.options}}" wx:key="index"> <label class="radio-inline"> <radio name="{{'group_' + item.id}}" value="{{index}}"/> {{item.options[index]}} </label><br/> </block> </view> ``` 此段 WXML 结合 JSON 数据源能够动态生成一系列带编号的选择题，并允许用户交互选择答案。