微信小程序点击按钮或者自动定位到某一个位置-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序点击按钮或者自动定位到某一个位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序想要定位某一个位置，一般都是用组件scroll-view实现的

1.如果没有组件化，直接在scroll-view写html代码的时候，想要定位在scroll-view可视化开始端是比较简单的。

<scroll-view scroll-y scroll-into-view="{{id}}">
  <view id="title">
  </view>
  <view id="content">
  </view>
  <view id="bottom">
  </view>
</scroll-view>

值得注意的是scroll-view自己的高度必须是固定的比如400rpx，如果是全屏可以使用100vh.

scroll-into-view属性在官方文档的解释如下

微信小程序调整按钮位置,微信小程序,小程序,微信

通过变化id来达到效果

2.还有一种情况复杂一点就是，使用了组件，如下结构

<scroll-view scroll-y scroll-into-view="{{id}}" class="viewBox">
  <con1 id="con1"><con1>//自定义组件1
  <con2 id="con2"><con2>//自定义组件2
  <con3 id="con3"><con3>//自定义组件3
</scroll-view>

这个时候想定位在自定义组件con2某一个元素，按最上面的方法还可以吗？答案是不可以。因为官方社区的人员说了这种方式对自定义组件的内部元素是不生效的

微信小程序调整按钮位置,微信小程序,小程序,微信

所以呢，我们就只能按照上面的方法去做了

使用ScrollViewContext.scrollIntoView(string selector)

这个方法需要设置scroll-view组件的enhanced为true

代码如下

       this.createSelectorQuery().select('.viewBox').node(function(res){
         console.log(res.node)
       }).exec(res=>{
         const scrollView  = res[0].node
         scrollView.scrollIntoView( '#con2'>>>'#contentSonId' )
       })

其中是'#con2' >>> '#contentSonId'的意义是id为con2自定义组件中的子元素id为contentSonId元素。

这种方法可以实现元素出现在scroll-view可视区域的最顶端，但是如果要想有一个偏移量，比如想要出现在最顶端100rpx左右，建议考虑不使用上面介绍的方法，通过计算scroll-top来实现。文章来源地址https://www.toymoban.com/news/detail-628133.html

到了这里，关于微信小程序点击按钮或者自动定位到某一个位置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！