微信小程序实现横向竖向联动滑动

最新推荐文章于 2024-08-12 17:54:40 发布

hl_Abel

最新推荐文章于 2024-08-12 17:54:40 发布

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/hl_Abel/article/details/105448663

版权

本文介绍了如何在微信小程序中利用scroll-view组件实现竖向滑动，并通过示例代码展示了如何设置固定高度和scroll-into-view属性。同时探讨了实现双向联动的需求，当每块内容高度固定时，可以通过预设高度实现。然而，实际操作中遇到了定位不准确的问题，由于项目紧迫，作者暂时放弃了解决这个问题，承诺后续解决后更新内容。

摘要由CSDN通过智能技术生成

实现基于小程序的scroll-view组件
竖向：需要设置固定高度 scroll-into-view：滚动到需要显示的元素

<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{
  {toView}}" scroll-top="{
  {scrollTop}}">
    </scroll-view>

横向：

 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
        </scroll-view>

实现效果如图：
在这里插入图片描述
代码：
wxml:

<scroll-view scroll-y="true" style="height: {
  {detailHeight-50}}px;" bindscroll="scroll" scroll-top="{
  {scrollTop}}" scroll-with-animation="true" scroll-into-view="{
  {toView}}">
    <view class="subdetail">
      <rich-text id="questitle" style="text-align:center;" nodes="{
  {homeworkName}}"></rich-text>
      <view style="margin-bottom:10px;" w