小程序中自定义单选和多选效果的代码是什么-群英

上一篇：如何用vue实现一个商城的商品选项卡效果下一篇：基于vue开发秒杀倒计时功能的思路和代码是什么

这篇文章给大家分享的是小程序中自定义单选和多选效果的代码是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

小程序实现自定义多层级单选和多选的具体代码如下

效果：

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" , } }

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}) } } })