小程序 picker 支持一级二级可选

<view class="section">
    <picker mode="multiSelector" 
           bindchange="bindMultiPickerChange"              
           bindcolumnchange="bindMultiPickerColumnChange"
           disabled="{{subject.length===0}}"
           bind:tap="checknodata"
           bindcancel="cancelPicker"
           value="{{ multiIndex }}"
           range="{{ multiArray }}">
              <view class="picker">
                  <view class='txt'>
                 {{ provinceName }}{{(provinceName===''&&cityName=='')?'请选择科目':(cityName===''?'':'-')}}{{ cityName }}
                 </view>
                 <image class='img' src='/private-education/index/exchange.png'></image>
              </view>
     </picker>
</view>

```javascript
.picker{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .txt{
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
    }
    .img{
        margin-left: 8rpx;
        width: 22rpx;
        height: 18rpx;
    }
}



```javascript
const app = getApp()

Component({
    /**
   * 组件的属性列表
   */
    properties: {
        listSubjectOuter: {
            type: Array,
            value: []
        }
    },
    observers: {
        listSubjectOuter: function (val) {
            this.setData({subject: val})
            this.init()
        }
    },
    /**
   * 组件的初始数据
   */
    data: {
        // 二位数组
        multiArray: [
            [], []
        ],
        multiIndex: [
            0, 0
        ],
        subject: [],
        provinceName: '',
        cityName: ''
    },
    attached() {},
    /**
   * 组件的方法列表
   */
    methods: {
        init() {
            let {provinceArr, cityArrObj} = this.formatAreaList(this.data.subject)
            this.setData({provinceArr, cityArrObj})
            // 调整二级联动数据结构
            this.adjustAreaList()
        },
        formatAreaList(areaList) {
            let provinceArr = [];
            let cityArrObj = {};

            areaList.forEach((item, index) => {
                    provinceArr.push(item.name);
                    if(item.twoSubject===null){
                        item.twoSubject = []
                    }
                    let cityArr = item.twoSubject.map(i => {
                        return i.name
                    })
                    cityArrObj[item.name] = cityArr
                // else{
                //     provinceArr.push(item.name);
                //     cityArrObj[item.name] = ''
                // }
            })
            return {provinceArr, cityArrObj}
        },
        // 调整二级联动数据结构
        adjustAreaList() {
            let {
                subject,
                multiArray,
                provinceName,
                multiIndex,
                cityName,
                provinceArr,
                cityArrObj
            } = this.data
            if (provinceName && cityName) { // 存在则自动定位到相应的多级
                this.setData({
                    multiArray: [
                        provinceArr, cityArrObj[provinceName]
                    ],
                    multiIndex: [
                        provinceArr.indexOf(provinceName), cityArrObj[provinceName].indexOf(cityName)
                    ]
                })
            }else if(provinceName!==''&cityName===''){
                //单级选中
                this.setData({
                    multiArray: [
                        provinceArr,
                        []
                    ],
                    multiIndex: [provinceArr.indexOf(provinceName), 0]
                }) 
            }else { // 默认第一个
                this.setData({
                    multiArray: [
                        provinceArr,
                        cityArrObj[provinceArr[0]]
                    ],
                    multiIndex: [0, 0]
                })
            }
        },

        bindMultiPickerChange(e) {
            let that = this
            that.setData({multiIndex: e.detail.value})
            const subject = that.data.subject[that.data.multiIndex[0]]
            const twoSubject = subject.twoSubject[that.data.multiIndex[1]]
            var subjectId = subject.id || 0
            var twoSubjectId = (twoSubject===null||twoSubject===undefined)?0:twoSubject.id
            that.triggerEvent('changeSubject', {
                subjectId: subjectId,
                twoSubjectId: twoSubjectId||0
            })
            this.setData({
                provinceName: subject.name,
                cityName: twoSubject ? twoSubject.name : ''
            })
            console.log(subject.name, twoSubject)
        },

        bindMultiPickerColumnChange(e) {
            let that = this
            let {subject, multiArray, multiIndex} = that.data
            let col = e.detail.column
            let val = e.detail.value
            multiIndex[col] = val
            switch (col) {
                case 0:
                    for (let i = 0; i < subject.length; i++) {
                        switch (multiIndex[0]) {
                            case i: 
                            let addressArray = []
                            for (let j = 0; j < subject[i].twoSubject.length; j++) {
                                    addressArray.push(subject[i].twoSubject[j].name)
                            }
                            multiArray[1] = addressArray
                            break
                        }
                    }
                    multiIndex[0] = val
                    multiIndex[1] = 0
                    that.setData({multiIndex, multiArray})
            }
        },
        cancelPicker() {
            let {provinceArr, cityArrObj, provinceName, cityName} = this.data
            if(provinceName===''){
                return
            }
            this.setData({
                multiArray: [
                    provinceArr, cityArrObj[provinceName]
                ],
                multiIndex: [
                    provinceArr.indexOf(provinceName), cityArrObj[provinceName].indexOf(cityName)
                ]
            })
        },
        checknodata(){
            if(this.data.subject.length===0){
                app.toast('当前无可选科目,请稍后再试')
            }
        }
    }
})

在这里插入图片描述[{“id”:1005300259,“name”:“行测”,“isTwoSubject”:true,“twoSubject”:[{“id”:1005300258,“name”:“言语理解与表达”},{“id”:1005300257,“name”:“判断推理”}]},{“id”:100520985,“name”:“笔试行测-数量关系”,“isTwoSubject”:false,“twoSubject”:null}]

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值