微信小程序scroll-view组件设置 scroll-top无效问题解决

这篇具有很好参考价值的文章主要介绍了微信小程序scroll-view组件设置 scroll-top无效问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序官方提供了一个可以设置滚动条位置的方法scroll-top
微信小程序scroll-view组件设置 scroll-top无效问题解决
在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。

这里演示一个切换选项重置滚动条事件的案例:

    <scroll-view class="listDetail" 
      scroll-y="true"
      bindscrolltolower="scrollLower" 
      scroll-top="{{scrollTop}}"
      >
      <view class="allDetail"></view>
    </scroll-view>
  data: {
    // data内不需要设置scrollTop
  },
  // 将scrollTop放在一个事件内执行,切换页面重置滚动条
    navTabClick() {
    this.setData({
      scrollTop: 0
    })
  },

注意:
这种在data内直接设置scrollTop初始化是无法生效的文章来源地址https://www.toymoban.com/news/detail-509286.html

    <scroll-view class="listDetail" 
      scroll-y="true"
      bindscrolltolower="scrollLower" 
      scroll-top="{{scrollTop}}"
      >
      <view class="allDetail"></view>
    </scroll-view>
  data: {
        scrollTop : 0
    }

到了这里,关于微信小程序scroll-view组件设置 scroll-top无效问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年01月18日
    浏览(58)
  • 微信小程序组件scroll-view滚动到底部多次触发加载如何解决?

    在 iOS 真机上,scroll-view 滚动时会多次触发 scrolltolower 事件的问题,可以设置一个“加载标识”(如 DisableTrigger)来避免重复请求下一页数据。具体做法为: 在 data 中新增一个 DisableTrigger 变量,用于标识当前是否可以执行下一页数据的加载操作。 在 init()方法中,在请求数据

    2024年02月13日
    浏览(53)
  • 微信小程序---scroll-view 设置scroll-x或者scroll-y如何去掉滚动条

    第一种方法: 第二种方法:添加( enhanced :show-scrollbar=“false”)

    2024年02月07日
    浏览(53)
  • 微信小程序 scroll-view设置scroll-x无法横向显示和滑动的解决方案

    仅仅设置 scroll-x无法实现横向排列和滑动?还需在scroll-view和子view的wxss样式里进行如下设置 如果想在子view里使用 弹性布局 display:flex ,也可以这样:

    2024年02月04日
    浏览(46)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(59)
  • 微信小程序 - scroll-view组件之上拉加载下拉刷新(解决上拉加载不触发)

    最近在做微信小程序项目中,有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能,遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题,网上很多说给scroll-view设置一个高度啥的就可以解决,有些人设置了高度也不触发,所以在下就研究了一波这个

    2024年02月14日
    浏览(39)
  • 关于uniapp微信小程序scroll-view组件使用show-scrollbar隐藏不了滚动条

    这里关于使用  scroll-view组件  时候有滚动条 想要隐藏滚动条但是使用show-scrollbar没有效果 这时候又使用类名隐藏滚动条 使用id隐藏滚动条都不行 解决方法:在使用  scroll-view组件 的页面或者app 页面加上以下代码就可以了         

    2024年02月12日
    浏览(45)
  • scroll-view回到顶部的使用(scroll-top)

    scroll-view遇到的坑!!加载分页数据的时候再次调用搜索接口会多调用一次触底事件!!导致每次重新搜索的时候渲染页面都多5条出来,还会出现两次加载中的弹框,用户体验差 无解 所以用到scroll-view中的scroll-top事件,让滚动条强行到顶部 官方文档:https://uniapp.dcloud.net.c

    2024年02月11日
    浏览(53)
  • 微信小程序 scroll-view

    微信官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 微信小程序 scroll-view 提示:以下是本篇文章正文内容,下面案例可供参考 可滚动视图区域 。 代码如下(示例): 提示:css 提示:scroll-view 属性 提示:设置自定义下拉刷新区域背景颜色

    2024年02月11日
    浏览(64)
  • 【微信小程序】scroll-view滚动

    wxml文件 wxss文件       wxml文件 wxss文件     注意事项: 1、在scroll-view标签上加上样式属性: display:flex; white-space:nowrap; 2、scroll-view标签下的一级栏目标签需要加上样式属性: display: inline-block; 只有结合上面两步,才能实现横向滚动。

    2024年02月13日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包