背景:当tabs下的tab切换时,scroll-view滑动到对应的位置
注意点:
van-tabs和scroll-view标签分开编写
van-tab的name属性代表标签名称,作为匹配的标识符
scroll-into-view的id值必须是动态值,即tab切换后的值
scroll-into-view的id不能时数字;
scroll-into-view的id值应为某子元素id。如以下的<view id="goods-rate">
wxml:
<van-tabs sticky active="{{ active }}" animated bind:click="clickTab"><van-tab wx:for="{{tabOptions}}" wx:key="index" name="{{item.viewId}}" title="{{item.title}}" data-id="{{item.viewId}}"></van-tab>
</van-tabs>
<scroll-view scroll-y class="goods-detail-container" scroll-into-view="{{viewId}}" scroll-with-animation><!-- 简介 --><view id="goods-introduce"><swiper class="swiper-container" indicator-dots indicator-active-color="#fff" autoplay circular><swiper-item class="swiper-item" wx:for="{{goodsInfoList.pics}}" wx:key="id"><image class="goods-desc-image" src="{{item.pic}}" mode="aspectFill"></image></swiper-item></swiper><view class="goods-basic"><view class="price"><view class="min-price">{{basicInfo.minPrice}}</view><view class="original-price">{{basicInfo.originalPrice}}</view></view><view class="title">{{basicInfo.name}}</view><view class="characteristic">{{basicInfo.characteristic}}</view><view class="share-desc">分享有赏,好友下单后可得5源现金奖励</view><view class="skulist"></view></view></view><!-- 详情 --><view id="goods-detail"><view class="label-title">商品详情</view><mp-html class="goods-detail-box" content="{{goodsInfoList.content || ''}}" /></view><!-- 评价 --><view id="goods-rate">宝贝评价</view>
</scroll-view>
js:clickTab点击切换后更改动态的viewId才能正常切换
data: {// 标签切换索引active: 1,tabOptions:[// viewId用户滚动到指定位置{title:"商品简介",viewId:"goods-introduce"},{title:"商品详情",viewId:"goods-detail"},{title:"商品评价",viewId:"goods-rate"},],// 标签切换idviewId: '',},
// 切换标签
clickTab(e){console.log(e,"onChange");this.setData({viewId: e.detail.name});
},