小程序横向scroll-view组件自动滚动到某个view

最新推荐文章于 2024-04-09 16:33:35 发布

原创最新推荐文章于 2024-04-09 16:33:35 发布 · 1.3w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用小程序中的scroll-view组件实现时间分栏功能。通过设置scroll-x属性来实现水平滑动，并利用scroll-into-view进行平滑滚动定位。文章详细展示了wxml和样式代码，以及如何通过setData更新页面数据。

先看下效果

scroll-view一般用于做横向侧滑动栏目,分类等等，在这里我用改组件做时间分栏。

wxml部分

<view class="scroll_box">
  <scroll-view class="scroll-view_x" scroll-x='true' scroll-into-view="{{toview}}" scroll-with-animation="true" scroll-left="{{scrollLeftSys}}">
    <view class="item_list" class="{{item.isChoose?'choosed':'not_choose'}}" wx:for="{{classData}}" wx:key='key' id='{{item.id}}' data-index="{{index}}" bindtap='switchType'>
      <text>{{item.time}}</text>
      <text>{{item.desc}}</text>
    </view>
  </scroll-view>
</view>

scroll-view中属性scroll-x/scroll-y声明该控件的滑动方向,属性scroll-into-view='target'为自定滚动到携带目标id='target'某个元素,scroll-left属性为滚动条左边距离,scroll-with-animation:滚动条时滚动动画，属性值为布尔值，具体文档详见；

小程序scroll-view组件

scroll-view样式

.scroll_box .scroll-view_x {
  width: 100%;
  white-space: nowrap;
  height: 4rem;
  overflow: hidden;
}

item的样式

.choosed {
  width: 20%;
  padding: 0.8rem 6.5%;
  font-size: 0.8rem;
  color: white;
  display: inline-block;
  white-space: nowrap;
  background-color: #fe4a65;
}

.not_choose {
  width: 20%;
  padding: 0.8rem 6.5%;
  font-size: 0.8rem;
  color: white;
  display: inline-block;
  white-space: nowrap;
  background-color: black;
}

.choosed text, .not_choose text {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}

page对象data属性中的classData

再处理完数据之后，需要更新一次page对象中的data，

 that.setData({
            toview: 'target'
          })

至此，这个功能就完成了。

小程序横向scroll-view组件自动滚动到某个view

1 条评论