关于 scroll-view 组件的具体用法 可参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
问题描述
需求是这样子滴
通过点击某个模块 滚动到对应的 tab 栏目
通过 scroll-view 的组件中的 scroll-into-view 属性来实现的
即 scroll-into-view 绑定一个子元素的值 然后设置哪个方向可滚动 则滚动到该子元素的位置
但是设置好了之后 点击跳转 并没有滚到对应的位置
翻阅了好多资料 也没找出啥原因
试了好多次后 终于找出原因 [○･｀Д´･ ○]
问题解决
以下几点是导致无效的原因：
所以只能用类似 data10 字符串拼接的写法
1
2
3
4
5
6
7
8
9
10
11
| e.g.
<scroll-view
class="onLook-tab"
scroll-x="true"
bindscroll="scroll"
scroll-into-view="data10"
scroll-with-animation="true">
</scroll-view>
|
上一个注意点说到了 不能绑定固定值 所以必须要动态获取的值
并且 不能在 onload 方法中去动态 setData
就是这条坑了我好久 要哭辽 o(╥﹏╥)o
page 没有设置 height：100%
跳转位置没有添加 id 标记
以下为具体实现代码：
1
2
3
4
5
6
7
8
9
| e.g.
<scroll-view class="onLook-tab" scroll-x="true" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-with-animation="true">
<view class="tabBar">
<block wx:for="{{onlookTab}}" wx:key="id" wx:for-index="i">
<view class=" tabItem {{ currentIndex == item.serial ?'active':''}}" id="data{{item.key}}" bindtap='tabClick' data-i="{{i}}" data-key="{{item.key}}" data-type="{{item.show_type}}">{{ item.value }}</view>
</block>
</view>
</scroll-view>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| e.g.
page {
height: 100%;
}
.onLook-tab {
position: relative;
border-bottom: 2px solid #f3f3f3;
margin: 16rpx 31rpx 0;
height: 96rpx;
line-height: 96rpx;
font-size: 16px;
white-space: nowrap;
color: #333;
font-weight: 500;
}
.tabBar {
display: flex;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.tabItem {
display: inline-block;
margin-right: 50rpx;
position: relative;
}
.tabItem.active::before {
content: '';
width: 100%;
height: 5rpx;
background: #b2863c;
position: absolute;
bottom: 0;
left: 0;
border-radius: 20%;
}
|
1
2
3
4
5
6
7
| e.g.
if (this.data.hasLeft) {
this.setData({
toView: `data${this.data.tabId}`
})
}
|
