微信小程序scroll-view的scroll-into-view和vanUI的tabs标签结合使用

Jyann~

已于 2023-12-14 19:27:02 修改

阅读量1k

点赞数 10

分类专栏：微信小程序文章标签：微信小程序 scroll-view van-tabs

于 2023-12-14 19:18:51 首次发布

本文链接：https://blog.csdn.net/qq_34569497/article/details/135002429

版权

微信小程序专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍如何在Vue应用中，使用van-tabs组件控制tab标签切换，同时确保scroll-view组件根据tab内容动态滚动到相应位置，特别强调了scroll-into-view属性的动态设置和viewId的使用规则。

摘要由CSDN通过智能技术生成

背景：当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"},
    ],
    // 标签切换id
    viewId: '',
  },
// 切换标签
clickTab(e){
  console.log(e,"onChange");
  this.setData({
    viewId: e.detail.name
  });
},