vue怎么通过if跳出方法_vue页面问题分享

项目介绍

这是一个微信端的搜索页面，主要包括三部分：搜索tag页，搜索结果页、搜素筛选页。

搜索结果页有几种交互：排序筛选、tag子类筛选。

筛选页交互：------

tag页：

搜索框：重新搜索；

联想词：搜索框内容改变，同步更新相关联想词；

搜索历史：之前的搜索记录；

热搜索词：接口返回的热搜词。

问题分享

问题一,关于筛选弹层的滚动穿透

前期方案：

给弹层需要滚动的父盒子添加样式{ height:100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;},给弹层父盒子添加个事件 @touchmove="xx($event)"阻止默认事件。

在父盒子内子元素滚动到底部时会触发底层商品列表的滚动。

涉及问题：

通过 event.stopPropagation(); 禁止冒泡；------没有效果。

行内添加@movestop 禁止本身滚动事件 --------- 自己不能动了。

后期方案：

引用iscroll:(iscroll-lite-v5.js)

涉及问题1： 之前在需滚动盒子上设置的@movestop未删掉，导致本身不能滑动。

解决： 删掉所有前期设置的禁止touchmove相关事件

涉及问题2： 在整体配置成功后，由于iscroll本身为了防止事件冒泡(防止穿透)，阻止掉了所有默认事件(包括点击事件)，导致弹层内所有点击事件失效。

解决：在调用iscroll时，放开部分标签的默认事件 :preventDefaultException: { tagName: /^(INPUT|I|SPAN)$/}

that.myScroll = new IScroll("#wrapper", {

preventDefaultException: { tagName: /^(INPUT|I|SPAN)$/ }

});

涉及问题3： 放开权限的标签可以触发点击事件，但是在这些标签上面滑动又会引发穿透，导致下层的商品列表滑动。

解决： 在放开默认事件的标签上设： @touchmove.prevent，手动阻止元素本身本身的滑动事件( .prevent为阻止默认事件)，这样也就不会把滑动事件冒泡到body。

{ {item.name}}

问题2：关于页面回退

问题背景：在搜索结果页点击商品，跳到详情页，在详情页点击回退按钮，回到刚才搜索结果页。产品要求保存之前的全部状态(滚动高度，原交互痕迹)。

：之前h5搜索是通过新开webview来解决回退保存状态的问题，微信浏览器不支持新开webview。

涉及问题：在微信浏览器中

iOS手机在页面回退时