微信小程序：VantWeapp组件Tab 标签页下划线显示位置不对

<van-tabs id="tabs" />// tab数据返回后对tab重绘this.selectComponent('#tabs').resize();参考vue vant tabs组件选中下划线位置异常

彭世瑜

3846人浏览 · 2021-07-05 10:30:00

彭世瑜 · 2021-07-05 10:30:00 发布

通过接口获取数据时，tabs组件下划线位置不对，有以下两种方式

官网地址:https://youzan.github.io/vant-weapp/#/tab

方法一

使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />

方法二

调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />

// tab数据返回后对tab重绘
this.selectComponent('#tabs').resize();

参考
vue vant tabs组件选中下划线位置异常

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^