小程序vtabs

npm i @miniprogram-component-plus/vtabs

npm i @miniprogram-component-plus/vtabs-content 

都设置好后还需要在工具中构建npm

vtabs有个bug——比如点击选项2会高亮会马上跳到选项1，内容区还是选项2的内容，解决办法

        找到@miniprogram-component-plus文件夹下的vtabs文件里的index.js

           把var scrollTop = e.detail.scrollTop改为var scrollTop = e.detail.scrollTop+(length-1)*0.19

        参照网址：微信小程序vtabs源码分析解决组件滑动跳转混乱或不准确bug_ZGIT的博客-CSDN博客     

wxml代码：

<mp-vtabs vtabs="{{vtabs}}" activeTab=" {{activeTab}}" bindtabclick="onTabCLick" bindchange="onChange" class="test">

<block wx:for="{{vtabs}}" wx:key="title">

<mp-vtabs-content tabIndex="{{index}}">

<view class="vtabs-content-item">我是第{{index + 1}}项： {{item.title}}</view>

</mp-vtabs-content>

</block>

</mp-vtabs>

注释：activeTab默认选中的选项框，根据索引值来改变

json代码：

"usingComponents": {

"mp-vtabs": "@miniprogram-component-plus/vtabs",

"mp-vtabs-content": "@miniprogram-component-plus/vtabs-content"

}

vtabs所需数据结构是  vtabs:[

                                                {title:'荣耀'},

                                                {title:'华为'},

                                                {title:'苹果'}                                                   

                                           ]

对应的是左边选项