微信小程序scroll-view组件[使用竖向横向滚动，flex布局不起效问题，滚动到下个元素及其滚动动画]

打不着的大喇叭

发布于 2024-03-11 17:33:52

3990

发布于 2024-03-11 17:33:52

文章被收录于专栏：喇叭的学堂喇叭的学堂

1、使用竖向横向滚动

scroll-y 属性：使用竖向滚动，必须给 scroll-view 一个固定高度

例如：height：60rpx;

scroll-x 属性：使用横向滚动，必须加以下样式

1、给 scroll-view 加 width: 100%; white-space: nowrap; 子元素必须设置 display: inline-block 2、使用 flex 布局，观看第二点

2、flex布局问题

属性	类型	默认值	必填	说明	最低版本
enable-flex	boolean	false	否	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	2.7.3

  <scroll-view scroll-x class="navScroll" enable-flex>
    ......
  </scroll-view>

   .navScroll {
      display: flex; /* 不设置 enable-flex，不生效 */
      white-space: nowrap; /* 阻止源码中的文本换行。 */
      height: 60rpx; /* 必须设置高度，因为使用flex布局后，会默认占据没有开启的高度 */
    }

3、滚动到该元素、滚动时的动画

属性	类型	默认值	必填	说明	最低版本
scroll-into-view	string		否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素	1.0.0
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡	1.0.0

<!-- 
    1、id不能以数字开头，所以用拼接一下
    2、每次点击 nav 项，获取 该次 点击项的 id，用 data-id="{{item.id}}" 传参，然后setData，保存为 navId，
    3、这时 scroll-into-view="{{'scroll' + navId}}" 和 scroll-into-view="{{'scroll' + navId}}" 对应，所以会滚动到该元素，但是没有动画
    4、scroll-view 组件加上 scroll-with-animation 就会出现滚动到该项的动画
 -->

  <scroll-view scroll-x scroll-into-view="{{'scroll' + navId}}" scroll-with-animation>
    <view id="{{'scroll' + item.id}}" wx:for="{{ListData}}" wx:key="id">
      <view bindtap="changeNav" data-id="{{item.id}}">
        {{item.name}}
      </view>
    </view>
  </scroll-view>

  data: {
    navId: '', // 导航的标识
  },  
  // 点击切换导航的回调
  changeNav(event) {
    //let navId = event.currentTarget.id; 
    // 通过id向event传参的时候如果传的是number会自动转换成string，navId>>>0, 右移0位，非number转为number【下面使用data-id传参，出现的是number】

    let navId = event.currentTarget.dataset.id;
    this.setData({
      navId: navId,
    })
  },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除

flex