微信小程序代码怎么实现四个相等区域

微信小程序代码怎么实现四个相等区域,第1张

微信小程序中支持省市区地址级联吗?

微信小程序中的地址级联最多支持到几级?

今天,我们就来看看,微信小程序中的地址级联的使用,以及一些坑…希望大家看完之后能避免踩坑啊。

省市区级联

小程序中,picker组件是个很棒的组件,可以干好多事儿,微信官方对它的解释是:

从底部d起的滚动选择器

那么,它都支持哪些功能呢?

普通选择器(selector)

多列选择器(multiSelector)

时间选择器(time)

日期选择器(date)

省市区选择器(region)

属性列表参考如图所示:

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

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

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

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

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

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

registerwxml

<view class="form-item list-msg">

<text class="item_name">性别</text>

<picker bindchange="pickSex" value="{{ gender }}" class="sex" range="{{ columns }}">

<view>

{{ columns[gender] == "" "请输入性别" : "" }}{{ columns[gender] }}

</view>

</picker>

</view>

registerjs

Page({

columns: ["未知", "男", "女"],

gender: 0 || wxgetStorageSync("gender") 1,

})

pickSex: function(e) {

thissetData({

gender: edetailvalue

});

// consolelog("当前选择性别-sex", edetailvalue);

},

选择日期和时间,直接使用小程序的默认组件picker,就可以解决了。

在组件picker选择日期:将mode设置为date,选择事件:将mode设置为time即可。

家园联系栏是家园共育的重要窗口,是家长和幼儿园联系的一个纽带。在幼儿园里各班都会开辟一块家园联系栏,用于家长及时把握幼儿园或班级的教育情况,也有利于老师更好地完成家长工作。

最近公司开发的小程序中,用到了小程序的picker组件,写了个二级级联动(三级联动同理)。从页面上看,明显数据已经是加载上去了,而且也确实是正确的

从这张图上可以看到,明明第二列的数组已经设置是长度为一个,但是在页面上,却显示了两个。

排查下来,就是文本中,name不能重名。必须保持是唯一的。

当我们把name设置成唯一值的时候,就不会有问题了。

以上就是关于微信小程序代码怎么实现四个相等区域全部的内容,包括:微信小程序代码怎么实现四个相等区域、阻止mpvue小程序change事件冒泡、wx小程序-picker自定义性别等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/zz/9704832.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存