怎么新建MySQL数据库
发布时间：2022-10-21
作者：admin
阅读：252
阅读：252
这篇文章给大家分享的是小程序中自定义单选和多选效果的代码是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
关于“小程序中自定义单选和多选效果的代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
小程序实现自定义多层级单选和多选的具体代码如下
效果：
ps：这儿是用自定义的下拉框，我把它封装成了一个组件
wxml
?< view class = "select-box" > < view class = "select-title" > < view class = "cell-border" > < van-field value = "{{ layout }}" data-key = "layout" placeholder = "请输入" required icon = "arrow" label = "户型" bind:tap = "onChange" /> </ view > </ view > < view class = "select-list" wx:if = "{{show}}" > < view class = "option" wx:for = "{{layouts}}" wx:key = "index" > < view class = "{{curItem.checked ? 'option-item-active' : 'option-item'}}" wx:for = "{{item.column}}" wx:key = "index" wx:for-item = "curItem" data-key = "{{curItem.key}}" data-colkey = "{{item.colKey}}" data-name = "{{curItem.name}}" bind:tap = "getOptionItem" > {{curItem.name}} </ view > </ view > </ view > </ view > |
wxss
?.select-box{ width : 100% ; padding : 20 rpx; box-sizing: border-box; } .cell-border { border-radius: 6 rpx; border : 1px solid #999 ; margin-bottom : 10 rpx; } .select-list{ display : flex; flex- direction : row; justify- content : space-around; width : 100% ; height : 360 rpx; padding : 20 rpx; box-sizing: border-box; background-color : #fff ; border : 1px solid #eee ; } .select-list .option{ display : flex; flex- direction : column; font-size : 24 rpx; } .option-item{ width : 80 rpx; height : 100 rpx; background-color : #eee ; text-align : center ; margin-top : 5px ; padding : 2px ; } .option-item-active{ width : 80 rpx; height : 100 rpx; background-color : #FF6600 ; text-align : center ; margin-top : 5px ; padding : 2px ; color : #fff ; } json { "component" : true, "usingComponents" : { "van-field" : "../../vant/field/index" , } } |
js
ps:data是组件本身的数据，layouts是数据源
?Component({ properties:{ }, data:{ show: false , curKey:-1, colKey:-1, layouts:[ { colKey:0, column:[ {name: "1室" ,key:0,}, {name: "2室" ,key:1,}, {name: "3室" ,key:2,}, {name: "4室" ,key:3,}, {name: "5室" ,key:4,}, {name: "6室" ,key:5,} ] }, { colKey:1, column:[ {name: "1厅" ,key:0,}, {name: "2厅" ,key:1,}, {name: "3厅" ,key:2,}, {name: "4厅" ,key:3,}, {name: "5厅" ,key:4,}, {name: "6厅" ,key:5,} ] }, { colKey:2, column:[ {name: "1厨" ,key:0,}, {name: "2厨" ,key:1,}, {name: "3厨" ,key:2,}, {name: "4厨" ,key:3,}, {name: "5厨" ,key:4,}, {name: "6厨" ,key:5,}] }, { colKey:3, column:[ {name: "1卫" ,key:0,}, {name: "2卫" ,key:1,}, {name: "3卫" ,key:2,}, {name: "4卫" ,key:3,}, {name: "5卫" ,key:4,}, {name: "6卫" ,key:5,} ] }, { colKey:4, column:[ {name: "1阳台" ,key:0,}, {name: "2阳台" ,key:1,}, {name: "3阳台" ,key:2,}, {name: "4阳台" ,key:3,}, {name: "5阳台" ,key:4,}, {name: "6阳台" ,key:5,} ] } ] }, methods:{ onChange(){ const {show} = this .data; this .setData({ show:!show }) }, getOptionItem(event){ console.log( "event" ,event) const key = event.currentTarget.dataset.key; const cK = event.currentTarget.dataset.colkey; const {curKey,colKey,layouts} = this .data; this .setData({ curKey:key, colKey:cK }) //用checked字段判断，允许每列之间单选,多行之间多选 layouts[cK].column.map(cur => { return cur.checked = false ; }) layouts[cK].column[key].checked = true ; this .setData({layouts}) } } }) |
关于“小程序中自定义单选和多选效果的代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理