微信小程序 通过 pageScrollTo 滚动到界面指定位置

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

我们可以先创建一个page 注意 一定要在page中使用 因为pageScrollTo控制的是页面滚动 你在组件里用 他就失效了

我们先来看一个案例
wxml 代码如下

<view>
    <button bindtap="handleTap">回到指定位置</button>
    <view class = "ControlHeight"></view>
    <view id = "pinglun">指定位置</view>
    <view class = "supportingBoundary"></view>
    <button bindtap="handleTap">回到指定位置</button>
</view>

wxss 代码如下

/* component/indexText.wxss */
.ControlHeight{
    width: 100vh;
    background-color: aqua;
    height: 100vh;
}
#pinglun{
    width: 100vw;
    text-align: center;
    color:black;
    font-size: 24rpx;
    height: 30rpx;
    line-height: 30rpx;
}
.supportingBoundary{
    width: 100vh;
    background-color:brown;
    height: 100vh;
}

js 参考代码如下


Page({
  data: {
 
  },
  onLoad() {
    
  },
  handleTap: function(e) {
    wx.pageScrollTo({
        selector: '#pinglun',
    });
  }
 
})

关键就在于 我们在页面上写了一个 id为pinglun的元素
然后 调用pageScrollTo 指定选择id为pinglun的元素 当然 id的名字大家可以随便取
这样 你就会发现 无论在页面任何位置 点击 触发handleTap
界面都会里面滚动到pinglun所在的位置
微信小程序滚动到指定元素,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-768728.html

到了这里,关于微信小程序 通过 pageScrollTo 滚动到界面指定位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】通过调用 wx.navigateBack() 方法来退出当前界面并返回上一个界面

    在点击某个按钮或执行某个条件时触发,示例代码: 在这个示例中, delta 参数指定了要返回的界面数。如果你只想返回上一个界面,可以将 delta 设置为 1。如果你想返回更多的界面,可以增加 delta 的值。 在小程序中,tabBar 页面的返回操作与非 tabBar 页面有所不同。通常,

    2024年02月13日
    浏览(53)
  • spring boot +微信小程序项目,通过微信公众号实现指定用户消息长期推送

    用户登录小程序,后台记录用户的小程序openId和用户唯一的UnionId。然后用户触发公众号事件(关注公众号或者发送指定消息),后台获取到用户公众号的openId,再调用接口通过公众号的openId查询用户的UnionId,再和数据库里的UnionId进行匹配,将用户的公众号openId存入数据库。此

    2024年02月03日
    浏览(61)
  • 微信小程序,竖向滚动公告

     view class=\\\"swiper_box\\\"           swiper                vertical=\\\"true\\\"               autoplay=\\\"true\\\"                circular=\\\"true\\\"               interval=\\\"3000\\\"               duration=\\\'300\\\'               easing-function=\\\'easeInOutCubic\\\'             

    2024年02月09日
    浏览(42)
  • 微信小程序实现滚动吸顶

    方法一:position:sticky简单粗暴,但存在部分机型不支持 1.position:sticky( position: -webkit-sticky): 类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。 eg:

    2024年02月13日
    浏览(55)
  • 微信小程序滚动穿透问题

    做小程序的开发业务中,经常会使用弹窗,当弹窗里的内容过多时,要滚动查看,然后经常会遇到滚动弹窗,弹窗底下页面也跟着滚。 解决思路: 设置page组件的wxss样式, overflow 动态设置 hidden 或者 visible 或者 auto , 就可以控制整个页面是否可以滚动。 注: 分享的方案只是一

    2024年02月11日
    浏览(54)
  • 微信小程序——文字水平循环滚动

    前言:有时候页面上需要放一个通告或者通知,成一行文字的形式,从右到左滑动直至全部消失之后,继而从最右侧出现,以此循环往复,接着小河码就带领大家在微信开发者工具中实现该特效,如果有幸被观众老爷们看到,希望能够点个赞哦。 1、在该页面的.wxml中按照如下

    2024年02月07日
    浏览(46)
  • 微信小程序文本横向无缝滚动

    背景: 微信小程序中列表宽度不够长,其中某字段显示不完整,因此要使其自动滚动。 (最初看网上很多用定时器实现,但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表,如果设置定时器性能耗费太大,因此只用css实现) 样

    2024年02月06日
    浏览(75)
  • 微信小程序(三十八)滚动容器

    注释很详细,直接上代码 上一篇 新增内容: 1.滚动触底事件 2.下拉刷新事件 源码: index.wxml index.wxss index.js 效果演示:

    2024年02月20日
    浏览(36)
  • 微信小程序隐藏页面滚动条

    开发小程序时,经常会碰到页面长度超过屏幕高度,然后下拉时会出现滚动条,对于一些有强迫症的人来说是不可忍受的。 网上看了好多,写的。都评论有起作用或者不起作用的。 我在这分享一个全局隐藏滚动条的方式。 样式代码我们在app.wxss中,写一个类选择器:   然后

    2023年04月20日
    浏览(46)
  • 微信小程序 顶部搜索 吸顶 不随页面滚动而滚动

    主要用于商城类小程序: 微信小程序 搜索框 顶部吸顶 顶部购物车栏固定 不随页面滚动而滚动 示例: 可以看到分为三部分--头部搜索框--中间商品区域(可滚动)----底部购物车(固定底部) 头部搜索框 最大的盒子宽高100% 头部盒子需要有固定高度 flex布局 flex-flow: column; (为了中间

    2024年02月12日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包