uniapp+vue2+JS,实现锚点定位

最新推荐文章于 2024-03-05 16:15:50 发布
最新推荐文章于 2024-03-05 16:15:50 发布
阅读量616 收藏 1
点赞数
文章标签： javascript uni-app 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62330492/article/details/129544138
版权

将不可视区域，定位到可视区域

1.利用uniapp，<scroll-view>标签将需要内容包起来

<scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height:100vh;box-siszing:border-box;margin-right:20rpx`" scroll-with-animation="true" >
	
    //内容区域 注意点：id动态ID的绑定
    <view class="box" v-for="(item,index) in list.questions"         
       :key="index":id='"anchor"+item.id'>
					{{item}}
	</view>
				
</scroll-view>

2.需要点击的锚点。给出点击事件

			<view :class="!ishow? 'buttontime no_warp':'buttontime auto_x'">
				<view class="singlebutton" v-for="(item,index) in list.questions" @click="goAnchor(item.id)">
					{{index+1}}
				</view>
			</view>

3.锚点点击事件js区域

goAnchor(e){
				console.log(e);
				this.$nextTick(()=>{
					this.intoView='anchor'+e
				})
			}

4.案例，完全代码

<template>
	<view>
		<view class="header" >
			<!-- 试题信息题量 -->
			<view class="page_header" >
				<view class="quantity">
					<span style="font-size: 34rpx;">{{order}}</span>/{{list.subjectnum}}题
				</view>
				<view class="unfold" @click="isShow()">
					<span v-show="!ishow">▼ 展开</span>
					<span v-show="ishow">▲收起</span>
				</view>
			</view>
			<!-- 按钮区域 -->
			<view :class="!ishow? 'buttontime no_warp':'buttontime auto_x'">
				<view class="singlebutton" v-for="(item,index) in list.questions" @click="goAnchor(item.id)">
					{{index+1}}
				</view>
			</view>
		</view>
		<view class="">
			<scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height:100vh;box-siszing:border-box;margin-right:20rpx`"
				scroll-with-animation="true"
			>
				<view class="box" v-for="(item,index) in list.questions" :key="index" :id='"anchor"+item.id'>
					{{item.id}}
				</view>
				
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				intoView:'',
				ishow:true,
				order:1,
				list: {
				        id: 22,
				        title: "2109全栈A《Vue移动项目开发》月考123",
				        info: "2109全栈A《Vue移动项目开发》月考理论",
				        addtime: "2021-12-12 11:21:24.0",
				        teacherid: 126,
				        admin: null,
				        begintime: "2021-12-07 15:33:59.0",
				        endtime: "2021-12-02 15:34:03.0",
				        currenttime: "2022-01-11 13:07",
				        studentStartTime: "2022-01-11 13:07",
				        limittime: 120,
				        order: 1,
				        aorder: 1,
				        num: 0,
				        pastnum: 0,
				        scores: 100.0,
				        pastscores: 60.0,
				        subjectnum: 31,
				        isshow: 1,
				        answershow: 2,
				        studentcounts: 0,
				        incomplete: 0,
				        limits: null,
				        markteachers: null,
				        students: null,
				        databaseid: 0,
				        state: 0,
				        result: null,
				        studentIsComplete: 0,
				        questions: [
				            {
				                "id": 40,
				                "testid": 22,
				                "title": "子组件向父组件传值,子组件绑定一个事件，通过什么来触发？",
				                "type": "单选题",
				                "scores": 2.0,
				                "answer": "B",
				                "tags": "",
				                "explains": "",
				                "answers": [
				                    {
				                        "id": 149,
				                        "answerno": "A",
				                        "questionid": 40,
				                        "content": "this.$on"
				                    },
				                    {
				                        "id": 150,
				                        "answerno": "B",
				                        "questionid": 40,
				                        "content": "this.$emit()"
				                    },
				                    {
				                        "id": 151,
				                        "answerno": "C",
				                        "questionid": 40,
				                        "content": "this.$bus"
				                    },
				                    {
				                        "id": 152,
				                        "answerno": "D",
				                        "questionid": 40,
				                        "content": "this.$refs"
				                    }
				                ],
				                "answerid": 0,
				                "comments": null,
				                "studentanswer": null,
				                "studentscores": null
				            },
							{
							    "id": 41,
							    "testid": 22,
							    "title": "子组件向父组件传值,子组件绑定一个事件，通过什么来触发？",
							    "type": "单选题",
							    "scores": 2.0,
							    "answer": "B",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 149,
							            "answerno": "A",
							            "questionid": 40,
							            "content": "this.$on"
							        },
							        {
							            "id": 150,
							            "answerno": "B",
							            "questionid": 40,
							            "content": "this.$emit()"
							        },
							        {
							            "id": 151,
							            "answerno": "C",
							            "questionid": 40,
							            "content": "this.$bus"
							        },
							        {
							            "id": 152,
							            "answerno": "D",
							            "questionid": 40,
							            "content": "this.$refs"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							},
							{
							    "id": 42,
							    "testid": 22,
							    "title": "子组件向父组件传值,子组件绑定一个事件，通过什么来触发？",
							    "type": "单选题",
							    "scores": 2.0,
							    "answer": "B",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 149,
							            "answerno": "A",
							            "questionid": 40,
							            "content": "this.$on"
							        },
							        {
							            "id": 150,
							            "answerno": "B",
							            "questionid": 40,
							            "content": "this.$emit()"
							        },
							        {
							            "id": 151,
							            "answerno": "C",
							            "questionid": 40,
							            "content": "this.$bus"
							        },
							        {
							            "id": 152,
							            "answerno": "D",
							            "questionid": 40,
							            "content": "this.$refs"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							},
							{
							    "id": 43,
							    "testid": 22,
							    "title": "子组件向父组件传值,子组件绑定一个事件，通过什么来触发？",
							    "type": "单选题",
							    "scores": 2.0,
							    "answer": "B",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 149,
							            "answerno": "A",
							            "questionid": 40,
							            "content": "this.$on"
							        },
							        {
							            "id": 150,
							            "answerno": "B",
							            "questionid": 40,
							            "content": "this.$emit()"
							        },
							        {
							            "id": 151,
							            "answerno": "C",
							            "questionid": 40,
							            "content": "this.$bus"
							        },
							        {
							            "id": 152,
							            "answerno": "D",
							            "questionid": 40,
							            "content": "this.$refs"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							},
							{
							    "id": 44,
							    "testid": 22,
							    "title": "子组件向父组件传值,子组件绑定一个事件，通过什么来触发？",
							    "type": "单选题",
							    "scores": 2.0,
							    "answer": "B",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 149,
							            "answerno": "A",
							            "questionid": 40,
							            "content": "this.$on"
							        },
							        {
							            "id": 150,
							            "answerno": "B",
							            "questionid": 40,
							            "content": "this.$emit()"
							        },
							        {
							            "id": 151,
							            "answerno": "C",
							            "questionid": 40,
							            "content": "this.$bus"
							        },
							        {
							            "id": 152,
							            "answerno": "D",
							            "questionid": 40,
							            "content": "this.$refs"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							},
							{
							    "id": 45,
							    "testid": 22,
							    "title": "子组件向父组件传值,子组件绑定一个事件，通过什么来触发？",
							    "type": "单选题",
							    "scores": 2.0,
							    "answer": "B",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 149,
							            "answerno": "A",
							            "questionid": 40,
							            "content": "this.$on"
							        },
							        {
							            "id": 150,
							            "answerno": "B",
							            "questionid": 40,
							            "content": "this.$emit()"
							        },
							        {
							            "id": 151,
							            "answerno": "C",
							            "questionid": 40,
							            "content": "this.$bus"
							        },
							        {
							            "id": 152,
							            "answerno": "D",
							            "questionid": 40,
							            "content": "this.$refs"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							},
				            {
				                "id": 46,
				                "testid": 22,
				                "title": "VueX的actions 描述正确的是？",
				                "type": "多选题",
				                "scores": 2.0,
				                "answer": "A|B|C",
				                "tags": "",
				                "explains": "",
				                "answers": [
				                    {
				                        "id": 153,
				                        "answerno": "A",
				                        "questionid": 41,
				                        "content": "vuex提供了Actions来专门进行异步操作。"
				                    },
				                    {
				                        "id": 154,
				                        "answerno": "B",
				                        "questionid": 41,
				                        "content": "Action 提交的是 mutation，而不是直接变更状态。"
				                    },
				                    {
				                        "id": 155,
				                        "answerno": "C",
				                        "questionid": 41,
				                        "content": "在组件中调用:this.$store.dispatch('increment',10)"
				                    },
				                    {
				                        "id": 156,
				                        "answerno": "D",
				                        "questionid": 41,
				                        "content": "actions方法都有默认的形参：[state] [,payload]"
				                    }
				                ],
				                "answerid": 0,
				                "comments": null,
				                "studentanswer": null,
				                "studentscores": null
				            },
				
				            {
				                "id": 47,
				                "testid": 22,
				                "title": "以下哪个属于css预编译语言？",
				                "type": "多选题",
				                "scores": 2.0,
				                "answer": "A|B|C",
				                "tags": "",
				                "explains": "",
				                "answers": [
				                    {
				                        "id": 165,
				                        "answerno": "A",
				                        "questionid": 44,
				                        "content": "less"
				                    },
				                    {
				                        "id": 166,
				                        "answerno": "B",
				                        "questionid": 44,
				                        "content": "sass"
				                    },
				                    {
				                        "id": 167,
				                        "answerno": "C",
				                        "questionid": 44,
				                        "content": "scss"
				                    },
				                    {
				                        "id": 168,
				                        "answerno": "D",
				                        "questionid": 44,
				                        "content": "es6"
				                    }
				                ],
				                "answerid": 0,
				                "comments": null,
				                "studentanswer": null,
				                "studentscores": null
				            } ,
							{
							    "id": 48,
							    "testid": 22,
							    "title": "以下哪个属于css预编译语言？",
							    "type": "多选题",
							    "scores": 2.0,
							    "answer": "A|B|C",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 165,
							            "answerno": "A",
							            "questionid": 44,
							            "content": "less"
							        },
							        {
							            "id": 166,
							            "answerno": "B",
							            "questionid": 44,
							            "content": "sass"
							        },
							        {
							            "id": 167,
							            "answerno": "C",
							            "questionid": 44,
							            "content": "scss"
							        },
							        {
							            "id": 168,
							            "answerno": "D",
							            "questionid": 44,
							            "content": "es6"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							} ,
							{
							    "id": 49,
							    "testid": 22,
							    "title": "以下哪个属于css预编译语言？",
							    "type": "多选题",
							    "scores": 2.0,
							    "answer": "A|B|C",
							    "tags": "",
							    "explains": "",
							    "answers": [
							        {
							            "id": 165,
							            "answerno": "A",
							            "questionid": 44,
							            "content": "less"
							        },
							        {
							            "id": 166,
							            "answerno": "B",
							            "questionid": 44,
							            "content": "sass"
							        },
							        {
							            "id": 167,
							            "answerno": "C",
							            "questionid": 44,
							            "content": "scss"
							        },
							        {
							            "id": 168,
							            "answerno": "D",
							            "questionid": 44,
							            "content": "es6"
							        }
							    ],
							    "answerid": 0,
							    "comments": null,
							    "studentanswer": null,
							    "studentscores": null
							} 
				        ]
				    }
			}
		},
		methods: {
			isShow(){
				this.ishow=!this.ishow
			},
			goAnchor(e){
				console.log(e);
				this.$nextTick(()=>{
					this.intoView='anchor'+e
				})
			}
		}
	}
</script>

<style lang="less">
.header{
	background-color:#82b1f7;
	padding:72rpx 20rpx 38rpx 20rpx;
	.page_header{
		display: flex;
		justify-content:space-between;
		color: #fff;
		font-size: 27rpx;
	}
	.buttontime{
		padding-top:20rpx;
		box-sizing:border-box;
		display:flex;
		.singlebutton{
			color:#fff;
			width:70rpx ;
			height:70rpx;
			background-color:#82b1f7 ;
			border-radius:10rpx;
			border:1rpx solid #fff;
			text-align:center;
			line-height:70rpx;
			margin-bottom:16rpx;
		}
	}
}
.no_warp{
	flex-wrap:wrap;
	.singlebutton{
		margin-right:14rpx;
	}
}
.auto_x{
	flex-wrap:nowrap;
	overflow-x: auto;
	.singlebutton{
		min-width:70rpx ;
		margin-right:16rpx;
	}
}
.box{
	padding: 20rpx;
	background-color: palegreen;
	margin: 10rpx;
	border: 1rpx solid;
	height: 500rpx;
}
</style>

5，上面是一个简易的锚点定位，有待优化改善。

内向蛋挞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp + vue3 + TypeScript + pinia + uviewplus
11-03
uniapp + vue3 + TypeScript + pinia + uviewplus
uniapp+vue2+onenet
01-22
uniapp+vue2+onenet
使用uniapp如何实现锚点定位和滚动监听功能
pgzero的博客
05-12 8132
一、如何实现锚点定位 在scroll-view组件中有一个scroll-into-view属性：（值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素）。 此属性的意思则是此属性的值为子元素设置的id时，则可跳转到子元素位置 例如上面图片代码，点击tab切换栏时，改变toView的值，使其为对应下方id则可实现滚动到当前子元素位置 二、如何实现滚动到子元素位置时改变tab栏状态 此选择器可得到元素距离顶部的位置，在@scroll事件中监听子元素距离顶部距离，则可实现滚动改变tab栏状态功能
uniapp 点击页面定位到指定位置 锚点跳转方法
热门推荐
一个处女座的CV工程师
12-15 1万+
uniapp 点击页面定位到指定位置 锚点跳转方法 but(){ uni.createSelectorQuery().select('.Follow-auto').boundingClientRect(data=>{//目标位置的节点：类class或者id uni.createSelectorQuery().select(".Follows").boundingClientRect(res=>{//最外层盒子的节点：类class或者id uni.pageScrollTo({ dura
实战｜环信 Vue2 uniapp Demo重构焕新！经典再升级！
最新发布
huan132456765的博客
03-05 1388
在本次重构中原始 Demo 代码逻辑完全重写，原有目录结构以及消息相关组件进行重新调整，在 SDK 的调用方式以及实现逻辑上也进行升级调整，在此次重构中会话列表、消息列表等数据不再进行本地存储，而是远端进行拉取，更换设备也可以进行数据获取，并在原有功能上增加更多丰富的群组以及消息操作，下面为带来更详细的描述。
uni-app实现锚点定位功能
Helsonlin
04-18 8366
效果图 功能实现 使用uni-app自带scroll-view组件利用scroll-into-view属性来自定滚动到的子元素的id，从而实现锚点功能。需要注意的地方有scroll-view需要指定高度，利用css来指定高度。 代码 <view class="service_item_list"> <u-tabs ref="tabs" font-size="30" :list="serviceList" :show-bar="true" :current="current" b
「神奇的锚点定位：探索UniApp中实现滚动定位效果，与1024程序员节同欢，解析技术之美」
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
10-19 2290
在这个即将到来的1024程序员节，我们将迎来一场技术盛宴。作为程序员的你，相信对于技术的热爱早已融入了生命的每一个角落。而正是因为这份热爱，我们才能不断追求创新、探索未知、解决问题。在这一年里，科技行业发展迅猛，无数令人惊叹的新技术不断涌现。人工智能、区块链、云计算、物联网……这些概念成为了我们日常工作中的关键词。面对如此繁杂的技术世界，我们时刻保持着学习的姿态，不断拓展自己的技术边界。而正是因为这种渴望掌握新知识的态度，我们才能够站在技术的前沿，体验最新最潮的技术趋势。
uniapp锚点定位
mygoes
01-05 6527
uniapp 锚点定位
uniapp实现简单的锚点定位
梦之归途的博客
10-09 4311
需要注意的是scroll-view必须设置高度，不设置的话没效果，但不要设置100%，除非父元素写了高度.同时虽然文档写的值应为某子元素id，但也可以是子孙元素。
uniapp如何实现锚点定位?
TeroZhang的博客
11-12 3515
在scroll-view组件中有一个scroll-into-view属性：（值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素）。【官方scroll-view说明】 此属性的意思则是此属性的值为子元素设置的id时，则可跳转到子元素位置。 先看下效果： 直接上代码： html: <template> <view> <scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height
uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】
m0_49714202的博客
09-27 1706
uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】
uni-app中使用锚点定位
lll19960406的博客
12-09 972
.toTop{ position: fixed; z-index: 2; left: 40rpx; bottom: 40vw; width: 100rpx; height:100rpx; } 之前有一个项目，是需要点击图片，跳转到相应板块。我一想，这不是锚点吗，具体使用如下 <view class='parts'> ...
uni app锚点定位 、自动吸顶、滚动自动选择对应的锚点
qq_44678911的博客
08-11 948
在点击tab的时候，发现当页面的内容有多个不足以撑满屏幕，比如（法务部门、人事部门这个两个tab的时候）（见下图），在前几个tab的被选中，再次点击最后两个tab的时候，会发现最后两个tab在选中的瞬间又会回到运营部门，我回想了问题可能出现在哪里，一想肯定是onPageScroll事件重新触发了，所以我在点击tab的时候，设置了 isTabChange的boolean值，在完成页面滚动的完成事件之后再次设置isTabChange == false，这样避免在这个期间，受到页面监听滚动事件的影响。
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
uniapp+vue3+pinia框架 uniapp：导航栏双页切换 vue3+pinia：实例化+参数输出+方法调用+模块化+持久化存储 购买后任何问题请私信沟通或添加技术服务群咨询。
uniapp+vue3+ts+picker 实现二级联动效果
08-25
全部为最新技术实现，vue3+typescript+uniapp最新版本，解决官方网站没有二级实现+picker,亲测好用
外卖扫码点餐独立全开源小程序源码uniAPP+VUE前端
05-18
外卖扫码点餐独立全开源小程序源码uniAPP+VUE前端 uniapp前端 Vue后台管理 vue-cli-service laravel+mysql5.7 全开源 100%开源 稳定运营 值得入手的好源码
泰裤辣！uniapp实现锚点定位功能（已解决）
ZHANG157111的博客
06-08 820
tab拦和滚动是相应的，滚动到相应的位置会切换tab拦，切换tab也会滚动到相应的位置，百度了八百遍。废话不多说直接上代码。
uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）
heavenz19的博客
11-27 1173
【代码】uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点（点击tab跳转对应的元素位置）
vue、uniapp实现锚点定位
wgjiayin的博客
02-25 2296
1.vue 点击页面定位到指定位置 锚点跳转方法 html部分： <template> <div class="home"> <div class="head" :style="{height:liHeight+'px'}" style=""> <li v-for="(item,index) in arr" v-show="index<liIndex" @click="liChange(index)">{{item}}&lt
websocket实时推送数据 uniapp+vue实现聊天功能
05-28
在uniapp+vue中实现WebSocket通信，可以使用uni-app提供的uni-ws组件。uni-ws是用于在uni-app中进行WebSocket通信的组件。使用uni-ws组件，可以轻松地在uni-app中实现实时聊天功能。 以下是实现WebSocket实时聊天...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值