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

背景:当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。如以下的

wxml:


  


  
  
    
      
        
      
    
    
      
        
          {{basicInfo.minPrice}}
        
        
          {{basicInfo.originalPrice}}
        
      
      {{basicInfo.name}}
      {{basicInfo.characteristic}}
      
      
    
  

  
  
    商品详情
    
  

  
  
    宝贝评价
  

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
  });
},

你可能感兴趣的:(微信小程序,微信小程序,scroll-view,van-tabs)