阻止mpvue小程序change事件冒泡

阻止mpvue小程序change事件冒泡,第1张

解决方法:给绑定change事件的元素或组件另外添加@click.stop指向一个空函数,用来阻止冒泡

注:此方法主要用于mpvue,@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定拿槐change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题,项目需要引用小程序的picker选择器组件,发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件(项目需要实现对一个模块进行点击跳转,同时要求模块内的一个子元素有选择器功能)绝纤

开始通过查看vue文档和小程序文档,找到两种方法,分别是vue的.stop阻止冒泡和小程序的catch前缀,但通过测试发现给change事件直接添加.stop或者catch没有用

最后选用了网上搜到的一个折中的方法,给picker选择器另外添加一个点击事件(或者给选择器的父元素添加点击事件),为新加的点击事件添加阻止冒泡方法,使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法,欢迎留言并敏仿

为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是 五层 ,所以需尽量避免多层级的交互方式。 而页面跳转则涉及到多个页面层级。

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;

如 'path?key=value&key2=value2'

eg:

wx.navigateTo({

    url:'test?id=1'

})

这种跳转方式默认有返回按钮,返回到上一个页面

关闭当前页面,跳转到应用内的某个页笑迅面。

需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;

如 'path?key=value&key2=value2'

eg:

wx.redirectTo({

    url:'test?id=1'

})

这种跳转方式默认有返回按钮,返回到上一个页面的再上一层

需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;

如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数

eg:

wx.reLaunch({

    url:'test?id=1'

})

这种跳转方式默认没有返回按钮,不需要默认返回按钮的页面就可以使用这个api了

需要跳转的 tabBar 页面的路径(需在 app.json 的  tabBar  字段定义的页面),路径后不能带参数

{

    "tabBar": {

        "list": [{

            "pagePath":"index",

          冲亩  "text":"首页"

        },{

            "pagePath":"other",

            "text":"其他"

        }]

    }

}

wx.switchTab({

url:'/index'

})

我们需要调转到tabbar定义的页面的时候,就需要这个api了。踩过这个坑的人就知道,除了这个api,其他的都不能跳转到tabar定义过的页面

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几散升森层。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12558318.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存