微信小程序锚点滑动问题

之前公司的微信小程序,有城市列表选项,同时右侧需要一个锚点,能够快速找到相应拼音下的城市。如图,
在这里插入图片描述在做完之后,发现在锚点上滑动时,城市列表并不会随着滑动相应改变。
通过多次的console.log()之后发现,小程序中,bindtouchmove并不会随着当前touch点来改变相应res中的内容。因为是公司内容,就不放代码,只提供一种思路,可以在锚点内部bindtouchstart,来获取初始点,然后在外部的view bindtouchmove,获取滑动的距离,再根据距离一个锚点高度的逻辑,判断出当前手指所在位置。给一个我的效果图:
在这里插入图片描述
如果有什么疑问,可以联系我。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于微信小程序触底后进行锚点跳转,可以通过使用小程序的scroll-view组件和wxs实现。具体步骤如下: 1. 在scroll-view组件中设置scroll-top属性和id属性,id属性为锚点的标记。 2. 在wxs中定义一个函数,用来监听scroll-view组件的滚动事件,当滚动到底部时,获取锚点的位置并进行跳转。 以下是一个示例代码: ``` <!--wxml文件--> <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"> <view id="anchor1"></view> <!--省略中间的内容--> <view id="anchor2"></view> </scroll-view> <!--wxss文件--> /*设置scroll-view组件的高度*/ scroll-view { height: 100%; } <!--wxs文件--> var anchorTop = 0; module.exports = { //监听scroll-view组件的滚动事件 handleScroll: function (e) { //获取到scroll-view组件的滚动距离 var scrollTop = e.detail.scrollTop; //获取锚点的位置 var query = wx.createSelectorQuery(); query.select('#anchor1').boundingClientRect(); query.select('#anchor2').boundingClientRect(); query.exec(function (res) { anchorTop = res[1].top;//获取锚点的位置 //当滚动到底部时,进行锚点跳转 if (scrollTop + 500 >= anchorTop) { wx.pageScrollTo({ scrollTop: anchorTop, duration: 300 }) } }) } } ``` 在以上示例代码中,wxs文件中的handleScroll函数用来监听scroll-view组件的滚动事件,并且获取锚点的位置。当滚动到底部时,使用wx.pageScrollTo函数进行锚点跳转,将scrollTop设置为锚点的位置,duration为滚动的时间。 需要注意的是,以上示例代码中的锚点位置获取方式仅适用于锚点距离scroll-view组件顶部的距离小于500px的情况,如果锚点距离顶部的距离较大,需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值