vue使用mui的picker,设置默认选项

一级选择示例如上图,如果后台给你的值(即默认值)不是第一个值,那么就需要设置默认值。而用vue的方式做,无论是第一次点开还是再次点开都是显示是第一个值,而不是你默认选择的那个值,这个时候怎么办呢?

   mui设置默认值如下两种方法:

1、setSelectedIndex(index[, duration, callback])

  • 参数:index

    Type: Number

    指定列表选中项

    如:picker.pickers[0].setSelectedIndex(4)

  • 参数:duration

    Type: Number

    过渡效果持续时间( ms )

    如:picker.pickers[0].setSelectedIndex(4,200)

  • 参数:callback

    Type: FUnction

    设置成功回调

    如:picker.pickers[0].setSelectedIndex(4,200,function(){})

2、setSelectedValue(value[, duration, callback])

  • 参数:value

    Type: String

    指定列表选中项

    如:picker.pickers[0].setSelectedValue('fourth')

  • 参数:duration

    Type: Number

    渡效果持续时间( ms )

    如:picker.pickers[0].setSelectedValue('fourth',200)

  • 参数:callback

    Type: FUnction

    设置成功回调

    如:picker.pickers[0].setSelectedValue('fourth', 200, function(){})

  • 如果用setSelectedIndex 设置,那么就要找到默认值所在数组的下标值,

  • var List=[
                            {
                                text: '不需要费用'
                            }, {
                                text: 'AA付款',
                            }, {
                                text:'自由付款',
                            }
                        ];
                        var payTypeList = [];  //可以选择的列表实际上是一个数组
                        var index      //用index来记住给你的那个默认值的下标
                        for(var i=0;i<List.length;i++){
                            payTypeList.push(List[i]);
                 
                                if (List[i].text === vm.data.PayType) {  //判断默认值=数组的元素,就可以拿到默认值下标
                                    index = i;
                                }
                            
                        }
                        var userPicker = new mui.PopPicker();
                        userPicker.setData(payTypeList);
                        if (!!vm.data.PayType) {     //默认值
                            userPicker.pickers[0].setSelectedIndex(index,800)
                        }
                        userPicker.show(function (items) {
                            vm.data.PayType = items[0].text;
                        });

  • 如果用setSelectedValue 设置,那么就是默认值,数组就需要value属性

  •  var payTypeList=[
                            {
                                value: '不需要费用',
                                text: '不需要费用'
                            }, {
                                value: 'AA付款',
                                text: 'AA付款',
                            }, {
                                value: '自由付款',
                                text:'自由付款',
                            }
                        ];
                        var userPicker = new mui.PopPicker();
                        userPicker.setData(payTypeList);
                        if (!!vm.data.PayType) {     //默认值
                            userPicker.pickers[0].setSelectedValue(vm.data.PayType, 200);  //vm.data.PayType数组的value值
                        }
                        userPicker.show(function (items) {
                            vm.data.PayType = items[0].text;
                        });

猜你喜欢

转载自blog.csdn.net/weixin_42606458/article/details/80973886
今日推荐