• 售前

  • 售后

热门帖子
入门百科

小步调实现自定义多层级单选和多选

[复制链接]
gui57 显示全部楼层 发表于 2021-10-26 13:58:17 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了小程序实现自界说多层级单选和多选的具体代码,供大家参考,具体内容如下
效果:
ps:这儿是用自界说的下拉框,我把它封装成了一个组件

wxml
  1. <view class="select-box">
  2.     <view class="select-title">
  3.         <view class="cell-border">
  4.             <van-field value="{{ layout }}" data-key="layout" placeholder="请输入" required icon="arrow" label="户型" bind:tap="onChange" />
  5.         </view>
  6.     </view>
  7.     <view class="select-list" wx:if="{{show}}">
  8.         <view class="option" wx:for="{{layouts}}" wx:key="index">
  9.             <view class="{{curItem.checked ? 'option-item-active' : 'option-item'}}"
  10.                 wx:for="{{item.column}}" wx:key="index"
  11.                 wx:for-item="curItem"
  12.                 data-key="{{curItem.key}}"
  13.                 data-colkey="{{item.colKey}}"
  14.                 data-name="{{curItem.name}}"
  15.                 bind:tap="getOptionItem">
  16.                 {{curItem.name}}
  17.             </view>
  18.         </view>
  19.     </view>
  20. </view>
复制代码
wxss
  1. .select-box{
  2.     width: 100%;
  3.     padding: 20rpx;
  4.     box-sizing: border-box;
  5. }
  6. .cell-border {
  7.     border-radius: 6rpx;
  8.     border: 1px solid #999;
  9.     margin-bottom: 10rpx;
  10. }
  11. .select-list{
  12.     display: flex;
  13.     flex-direction: row;
  14.     justify-content: space-around;
  15.     width: 100%;
  16.     height: 360rpx;
  17.     padding: 20rpx;
  18.     box-sizing: border-box;
  19.     background-color: #fff;
  20.     border: 1px solid #eee;
  21. }
  22. .select-list .option{
  23.     display: flex;
  24.     flex-direction: column;
  25.     font-size: 24rpx;
  26. }
  27. .option-item{
  28.     width: 80rpx;
  29.     height: 100rpx;
  30.     background-color: #eee;
  31.     text-align: center;
  32.     margin-top: 5px;
  33.     padding: 2px;
  34. }
  35. .option-item-active{
  36.     width: 80rpx;
  37.     height: 100rpx;
  38.     background-color: #FF6600;
  39.     text-align: center;
  40.     margin-top: 5px;
  41.     padding: 2px;
  42.     color:#fff;
  43. }
  44. json
  45. {
  46.     "component": true,
  47.     "usingComponents": {
  48.       "van-field": "../../vant/field/index",
  49.     }
  50.   }
复制代码
js
ps:data是组件本身的数据,layouts是数据源
  1. Component({
  2.     properties:{
  3.         
  4.     },
  5.     data:{
  6.         show:false,
  7.         curKey:-1,
  8.         colKey:-1,
  9.         layouts:[
  10.             {
  11.                 colKey:0,
  12.                 column:[
  13.                     {name:"1室",key:0,},
  14.                     {name:"2室",key:1,},
  15.                     {name:"3室",key:2,},
  16.                     {name:"4室",key:3,},
  17.                     {name:"5室",key:4,},
  18.                     {name:"6室",key:5,} ]
  19.             },
  20.             {
  21.                 colKey:1,
  22.                 column:[
  23.                     {name:"1厅",key:0,},
  24.                     {name:"2厅",key:1,},
  25.                     {name:"3厅",key:2,},
  26.                     {name:"4厅",key:3,},
  27.                     {name:"5厅",key:4,},
  28.                     {name:"6厅",key:5,} ]
  29.             },
  30.             {
  31.                 colKey:2,
  32.                 column:[
  33.                 {name:"1厨",key:0,},
  34.                 {name:"2厨",key:1,},
  35.                 {name:"3厨",key:2,},
  36.                 {name:"4厨",key:3,},
  37.                 {name:"5厨",key:4,},
  38.                 {name:"6厨",key:5,}]
  39.             },
  40.             {
  41.                 colKey:3,
  42.                 column:[
  43.                 {name:"1卫",key:0,},
  44.                 {name:"2卫",key:1,},
  45.                 {name:"3卫",key:2,},
  46.                 {name:"4卫",key:3,},
  47.                 {name:"5卫",key:4,},
  48.                 {name:"6卫",key:5,}
  49.                 ]
  50.             },
  51.             {
  52.                 colKey:4,
  53.                 column:[
  54.                     {name:"1阳台",key:0,},
  55.                     {name:"2阳台",key:1,},
  56.                     {name:"3阳台",key:2,},
  57.                     {name:"4阳台",key:3,},
  58.                     {name:"5阳台",key:4,},
  59.                     {name:"6阳台",key:5,}
  60.                     ]
  61.             }
  62.         ]
  63.     },
  64.     methods:{
  65.         onChange(){
  66.             const {show} = this.data;
  67.             this.setData({
  68.                 show:!show
  69.             })
  70.         },
  71.         getOptionItem(event){
  72.             console.log("event",event)
  73.             const key = event.currentTarget.dataset.key;
  74.             const cK = event.currentTarget.dataset.colkey;
  75.             const {curKey,colKey,layouts} = this.data;
  76.             this.setData({
  77.                 curKey:key,
  78.                 colKey:cK
  79.             })
  80.             //用checked字段判断,允许每列之间单选,多行之间多选
  81.             layouts[cK].column.map(cur => {
  82.                    return cur.checked = false;
  83.             })
  84.             layouts[cK].column[key].checked = true;
  85.             this.setData({layouts})
  86.         }
  87.     }
  88. })
复制代码
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作