小程序tab切换滚动到对应的位置(锚点)

本文详细描述了如何在微信小程序中使用scroll-view组件实现分类tab的切换以及点击后滚动到对应位置的功能,包括enable-flex属性的使用、scroll-into-view的动态设置和注意事项。
摘要由CSDN通过智能技术生成

 1.分类tab切换:

  <scroll-view class="nhj_nav" scroll-x="true" enable-flex>
      <view class="item {{indexId == index ? 'current' : ''}}" wx:for="{{nhjList}}" bindtap="scrollClick" data-id="{{index}}" wx:key="index">{{item.duan_name}}</view>
  </scroll-view>

ps:  enable-flex是因为scroll-view设置弹性布局dispaly:flex;不生效,所以加上这个属性

2.点击滚动到对应的位置:

   <scroll-view scroll-y scroll-into-view="{{intoIndex}}" scroll-with-animation class="scroll">
      <view wx:for="{{nhjList}}" wx:key="index" class="min_box" id="item{{index}}">
      
      // 循环显示的内容

      </view>
    </scroll-view>

3. js部分:

data:{

    intoIndex: '',

    indexId: 0,

}

 scrollClick: function (e) {

    this.setData({

      intoIndex: "item" + e.currentTarget.dataset.id,

      indexId: e.currentTarget.dataset.id

    })

  },

4. 运用到的scroll-view属性:   

scroll-x     (boolean)       允许横向滚动

scroll-y     (boolean)       允许纵向滚动

scroll-with-animation         (boolean)        在设置滚动条位置时使用动画过渡

scroll-into-view        (string)       值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素

5.其他说明(scroll-into-view可能无效的原因):

   scroll-into-view的值必须是动态的

需要滚动的scroll-view必须得有高度,否则的话scroll-into-view是无效的

  设置id的时候不能以数字开头

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值