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

先看下效果

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'
          })
至此,这个功能就完成了。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值