uni-app实现锚点定位功能

末蓝、 2023-01-13 10:50 670阅读 0赞

## 效果图 ##

![锚点功能][6873c5a81b2b06a5e36535a14d537d78.gif]

## 功能实现 ##

使用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" 
    	 bar-width="40" activeFontColor="#333333" active-color="#43B6BB"  @change="changeTab"></u-tabs>
    	<scroll-view :scroll-into-view="toView" :style="contentStyle" :show-bar="false" :scroll-y="true" :scroll-with-animation="true" class="service_item_content">	
    		<view class="md" id="md1"  v-html="serviceInfo.cont"></view>
    		<view class="md" id="md2"  v-html="serviceInfo.notice"></view>
    		<view class="md" id="md3"  v-html="serviceInfo.costExplain"></view>
    		<view class="md" id="md4"  v-html="serviceInfo.refundExplain"></view>
    		</scroll-view>
    </view>
    
    changeTab(resIndex) { 
    	this.current = resIndex
    	this.toView = 'md' + (resIndex + 1)
    	this.rotateAndScale()
    },

[6873c5a81b2b06a5e36535a14d537d78.gif]: /images/20221022/2debf3683350402ab37760a7563a132e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，670人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS定位与锚点

CSS文档流 CSS 有三种基本的定位机制：普通流、浮动流、定位流。 POSTION position定位属性，检索或设置对象的定位方式 posi

Dear 丶/ 2023年10月06日 14:59/ 0 赞/ 46 阅读

相关 uni-app实现锚点定位功能

效果图 ![锚点功能][6873c5a81b2b06a5e36535a14d537d78.gif] 功能实现使用uni-app自带`scroll-view`组件

末蓝、/ 2023年01月13日 10:50/ 0 赞/ 671 阅读

相关锚点定位

锚点定位通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步： 1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3

小鱼儿/ 2022年12月26日 02:19/ 0 赞/ 174 阅读

相关 uniapp隐私政策锚点

大多数时候，锚点都是用 a 链接结合 ref 实现，但是 uniapp 开发的小程序不支持，会报错，所以只能用自带的 scroll-view ，不要以为他只是一个可以滚动的容器

「爱情、让人受尽委屈。」/ 2022年11月28日 13:23/ 0 赞/ 1159 阅读

相关微信小程序基于scroll-view实现锚点定位

> 代码地址如下： > [http://www.demodashi.com/demo/14009.html][http_www.demodashi.com_demo_140

拼搏现实的明天。/ 2022年05月10日 00:44/ 0 赞/ 425 阅读

相关 Vue锚点定位

<div class="tab0" id="selector"> </div> 1.以下是js原生的scroll 滚动方式 //锚点

谁借莪１个温暖的怀抱￠/ 2021年09月24日 06:42/ 0 赞/ 479 阅读

相关锚点定位的三种解决方法

因为在项目中遇到锚点定位的问题，觉得有必要单独成文，来介绍锚点定位的解决办法。一.习锚点定位之前的知识储备: 1.1 ``号的作用 ``代表网页中的一个位置。其

墨蓝/ 2021年09月19日 23:48/ 0 赞/ 488 阅读

相关 Vue - 设置锚点，定位到固定位置

<template> <div class="wrap"> <ul> <li><a href="javascript:v

ゝ一世哀愁。/ 2021年07月25日 22:43/ 0 赞/ 746 阅读

相关 uniapp下拉刷新，锚点等功能实现

uniapp下拉刷新，锚点等功能实现 <template>  <!-- scr

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 20:18/ 0 赞/ 603 阅读

相关 HTML 锚点定位

链接`<a>`是最为常用的HTML元素之一，通过它可以将页面跳转到指定的地址。利用它非常便利的实现站内或者站际间页面跳转，有利于浏览者获取信息。首先看一段代码实例：

小灰灰/ 2020年05月15日 19:02/ 0 赞/ 853 阅读