小程序使用scroll-view点击跳到指定位置
我实现的是一个吸顶条 切换tabs跳到指定位置
使用scroll-view 包住页面所有内容
scroll-into-view
<scroll-view scroll-into-view="{{childViewId}}" scroll-y="{{true}}" refresher-enabled="{{false}}" bindscroll="onScroll"
class="scroll_y">
吸顶条 点击切换事件 clickCustomerTab
<view class="customer_tab flex_row main_axis_space_around" id="navbar">
<view>
<view class="text_customer_tab {{currentTab==0?'text_customer_tab_after':'text_customer_tab_before'}}"
data-current="0" bindtap="clickCustomerTab">客户资料</view>
<view class="customer_tab_line" style="{{currentTab==0?'display:block':'display:none'}}" data-current="0"
bindtap="clickCustomerTab"></view>
</view>
<view>
<view class="text_customer_tab {{currentTab==1?'text_customer_tab_after':'text_customer_tab_before'}}"
data-current="1" bindtap="clickCustomerTab">客户标签</view>
<view class="customer_tab_line" style="{{currentTab==1?'display:block':'display:none'}}" data-current="1"
bindtap="clickCustomerTab"></view>
</view>
<view>
<view class="text_customer_tab {{currentTab==2?'text_customer_tab_after':'text_customer_tab_before'}}"
data-current="2" bindtap="clickCustomerTab">客户动态</view>
<view class="customer_tab_line" style="{{currentTab==2?'display:block':'display:none'}}" data-current="2"
bindtap="clickCustomerTab"></view>
</view>
</view>
对应位置 id
<view class="view_customers_tag flex_column" id="IdCustomerInfo">
内容
</view>
<view class="view_customers_tag flex_column" id="IdCustomerTags">
内容
</view>
<view class="view_customers_tag flex_column" id="IdCustomerDynamic">
内容
</view>
js事件 根据current分别跳转
data:{
childViewId: ''
}
clickCustomerTab(e) {
const current = parseInt(e.currentTarget.dataset.current);
console.log(current)
let childViewId = '';
switch (current) {
case 0:
childViewId = 'IdCustomerInfo'
break;
case 1:
childViewId = 'IdCustomerTags'
break;
case 2:
childViewId = 'IdCustomerDynamic'
break;
}
var that = this;;
that.setData({
currentTab: e.target.dataset.current,
childViewId
});
},