小程序如何实现锚点跳转的效果?

小程序的scroll-view的使用

示例如下:

1.1 .atml文件:

<scroll-view scroll-y="true" style="height: {{height+'px'}};" scroll-into-view="{{ detail }}" scroll-with-animation="true">
  	<view id='detail0'> detail0 container </view>
  	<view id='detail1'> detail1 container </view>
  	<view id='detail2'> detail2 container </view>
  	<view id='detail3'> detail3 container </view>
</scroll-view>

style: 设置该容器的高度信息
scroll-into-view: 值为某个子元素的 id,滚动到该元素,元素顶部对齐滚动区域顶部
scroll-with-animation: 是否在设置滚动条位置时使用动画过渡

内部子标签需配置形如上述表示的id,结合scroll-into-view的值的变化来实现跳转到锚点的效果

1.2 .js文件

Page({
  data: {
    detail: 'detail0', // scroll-into-view的值,即跳转对应的id位置
    height: 0,  // 屏幕的高度
  },
  onLoad() {
   // 设置scroll-view的容器高度
  	this.setData({
		height: dd.getSystemInfoSync().windowHeight // 获取屏幕高度
	})
  },
  // 设置detail的值以实现滚动到指定位置的效果
  scrollToView(e){
  	const { index } = e.target.dataset
	this.setData({
		detail: `detail${index}`
	})
  }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值