美文网首页微信小程序
微信小程序填坑之路(七):scroll-view的scroll-

微信小程序填坑之路(七):scroll-view的scroll-

作者: 码途有道 | 来源:发表于2019-04-21 20:31 被阅读0次

前言

最近做一个项目,有个页面中需要列表展示图片,并且刚进入展示页面的时候,不是直接显示顶部,而是显示列表中指定图片的位置。正好 scroll-viewscroll-into-view 属性可以滑动到列表中的指定 item 位置,就不用在额外去做别的实现了。

scroll-into-view的注意点

scroll-into-view 是 scroll-view 的一个属性,主要作用是用于滚动到指定元素的位置,其对应值是元素的id,使用方法如下:

 <scroll-view scroll-y class="scroll" scroll-into-view="{{toView}}">
    <view id="{{'item'+index}}" class="item" wx:for="{{dataList}}" wx:for-index="index" wx:for-item="item" wx:key="{{index}}">
       ...
    </view>
 </scroll-view>

toView 就是要滚动到的元素的位置,但是有几个地方需要注意,否则没有效果

  1. scroll-into-view 的值必须是动态的,通过setData设置后,重新渲染才会有效。如果是静态的,如scroll-into-view="item2",则无效。
  2. scroll-view 必须有固定的高度,如果设置高度为百分比的话,父容器一定要固定高度,否则无效。比如最顶层的 view 没有设置固定高度,然后在下面添加的 scroll-view 的高度就直接设置height:100%是无效的,此时可以设置为height:100vh代替。

相关文章

  • 微信小程序填坑之路(七):scroll-view的scroll-

    前言 最近做一个项目,有个页面中需要列表展示图片,并且刚进入展示页面的时候,不是直接显示顶部,而是显示列表中指定图...

  • 微信小程序开发问题集合

    微信小程序text文本溢出单行/多行省略 微信小程序填坑之路之文本溢出 CSS3文本溢出显示省略号 以上三个链接的...

  • 微信小程序的填坑之路

    一 .Mac打开微信开发工具显示的是空白页 网上说的卸载了 再安装 试了好几次都没有解决问题 原来是还有缓存的什么...

  • scroll-into-view无效的问题

    刚开始写微信小程序。简单记录一下踩的坑。scroll-view使用时怎么都无法跳转,最后解决。简单总结下坑。scr...

  • 微信小程序fixed定位后scroll-view滚动失效问题

    如图微信小程序中 scroll-view组件外div加display:flxed后, scroll-view组件滚...

  • 微信小程序实践

    今天,实践了微信小程序,边看文档边填坑。 IDE:指的是微信开发者工具。IDE版本:Stable v1.02.20...

  • 微信小程序scroll-view的坑

    在scroll-view中不能使用flex布局!!!在使用横向滚动时,发现不能滚动,解决方法: scroll-le...

  • 微信小程序scroll-view横向滚共不生效

    微信小程序scroll-view横向滚共不生效 css文件要求 一定要将scroll-view容器设置宽度,并设置...

  • 微信小程序

    制作微信小程序: A:微信小程序接入流程 注册:微信公众平台注册小程序,同步进行信息完善和开发 小程序信息完善:填...

  • 小程序相关实用文章

    1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...

网友评论

    本文标题:微信小程序填坑之路(七):scroll-view的scroll-

    本文链接:https://www.haomeiwen.com/subject/ajojgqtx.html