配置 up 的 isBounce 为 false, 禁止 ios 的回弹效果导致的
<div id="mescroll" class="mescroll">
<div>
<van-tabs
v-model="active"
swipeable
animated
@change="changeEvent(active)"
@click="clickEvent"
ref="vanx"
>
<van-tab
v-for="(item,index) in typeAry"
:title="item.name"
:key="index"
>
<!-- {{ item.name }} 内容? -->
</van-tab>
</van-tabs>
</div>
</div>
this.$nextTick(function() {
// DOM 现在更新了
// `this` 绑定到当前实例
console.log("ref1", this.$refs.vanx);
console.log("ref2", this.$refs.vanx.$el.childNodes[0]);
// 报错 -- 伪数组不能直接 push
// that.$refs.vanx.$el.childNodes[0].classList.push("ceshixxx");
// ref 4 ref5 打印可以看到 界面视图看不到 无效果
// this.$refs.vanx.$el.childNodes[0].className += " mescroll-touch";
// this.$refs.vanx.$el.childNodes[0].className += " ceshi";
// that.$refs.vanx.$el.childNodes[0].setAttribute('class','ceshi');
this.$refs.vanx.$el.childNodes[0].classList.add("ceshi");
// 无效 报错
// that.$refs.vanx.classList.add("mescroll-touch");
console.log("ref3", this.$refs.vanx);
console.log("ref4", this.$refs.vanx.$el.childNodes[0].className);
console.log(
"ref5",
document.getElementsByClassName("van-tabs__wrap")
);
this.ce = 1;
});
// 最终还是原生添加
let list = document.getElementsByClassName("van-tabs__nav")[0];
list.classList.add("mescroll-touch");
console.log("哦豁", list);
注意: 配置 up 的 isBounce 为 false 之后,会禁止 window 的 touchmove 事件,从而阻止 iOS 的回弹效果.
此时除了 mescroll 的 div 可以滑动,其他的区域匀无法滑动;
如果你希望 mescroll 之外的某个 div 可以滑动,则可为这个 div 加入 mescroll-touch 的样式即可;
比如你希望顶部导航菜单 class="nav-top" 的 div 可接收 touchmove 事件,则 class="nav-top mescroll-touch"
如果添加 mescroll-touch-x 则可水平滑动;如果添加 mescroll-touch-y 则可上下滑动
网友评论