uni-app实现锚点定位功能

效果图

功能实现

使用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 = resIndexthis.toView = 'md' + (resIndex + 1)this.rotateAndScale()
},

     data() {return {animationData: {},animation: null,}},methods: {changeTab(resIndex) {this.current = resIndexthis.rotateAndScale()},// 定义动画内容rotateAndScale() {// 定义动画内容this.animation.rotate(45).scale(2, 2).step()// 导出动画数据传递给data层this.animationData = this.animation.export()},norotateAndScale() {this.animation.rotate(0).scale(1, 1).step()this.animationData = this.animation.export()},},onShow: function() {var animation = uni.createAnimation({duration: 1000,timingFunction: 'ease',})this.animation = animation}}
</script>

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

vue页面锚文本_Vue如何实现锚点定位功能？
整个链路应该是这样的,用户在消息中心中看到回复自己的信息,点进去后会跳到视频播放页面,页面url中会带上此次消息的replyId(就简称rid吧),然后接下来的问题就是有两个,一个是评论本身是分页的, ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
元素在锚点定位后始终在页面居中显示的方法
元素在锚点定位后始终在页面居中显示的方法锚点定位功能可以使我们快速方便地跳转到我们想去的任何位置,但是如果我们在某个元素上添加锚点并跳转后,该元素始终会贴近在浏览器顶部,下面举例说明. 比如说有这样 ...
Android判断定位功能是否可用
定位功能是否可用由定位服务和定位权限共同决定: 判断定位服务: /*** 手机是否开启位置服务,如果没有开启那么所有app将不能使用定位功能*/public static boolean isLocS ...
jquery锚点定位
jquery实现锚点定位功能这里主要是通过jquery实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 $leftnav为左侧楼层导航栏(left-nav),右侧right-conten ...
uniapp App端后台间隔时间发送定位功能实现
文章目录前言一.核心api 二.代码实现 1.locationWatcher.js: 2.页面引用运行结果三.注意事项前言 uniapp开发app端时候,某些业务场景需求:在后台不间断(间隔 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
Delphi APP 開發入門（五）GPS 定位功能
Delphi APP 開發入門(五)GPS 定位功能分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數:3 ...
onenetsim定位功能吗_微信小程序新增后台定位功能，你会卸载地图APP用微信导航吗...
[PConline]8月8日,根据微信官方发布的消息显示,小程序新增后台定位功能,并对自动化测试功能进行了升级.据介绍,为了满足线路导航.路线记录等服务场景下,小程序需要长时间持续定位来提供服务.当用 ...

uni-app实现锚点定位功能

效果图

功能实现

代码

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

最新文章

热门文章