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的时候不能以数字开头