微信小程序> 小程序 3级联动简洁样式picker实现省市县等等

小程序 3级联动简洁样式picker实现省市县等等

浏览量:3958 时间: 来源:qq_29965101

view 页面

<view class="contract">    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">        <view class='panel-min'>            <view class='flex'>                <view class='panel-title'>所属社区</view>                <view class='panel-text-ms'>                {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}                   </view>            </view>            <text class='arrow'></text>        </view>    </picker></view>

本例子只有一级,二级三级,后面做拼接

{{multiArray[0][values[0]]}} ,{{multiArray[1][values[0]]}},{{multiArray[2][values[0]]}}

2:js

        multiArray:[],//多纬度 一纬[['类1,类2']]  二维 [['类1,类2'],['类1子类1,类1子类2']]        multiIndex:0,        column:0,//改变的第几列        value:0, //第几列的第几个下标        values:[0,0], //多维选择的值        objectMultiArray: [],//多个结果 一纬 二维 [{},{}]               util.post('你的地址', {},function(res){         if (res.data.executed!=true){             util.showModel(res.data.message);             return ;         }         that.setData({ hidden: false });            var list = res.data.pageInfo.list;        // 返回的多维数组            var multiArray = list.map(item => {    // 此方法将校区名称区分到一个新数组中                return item.hpName;            });             //multiArray        显示用             //objectMultiArray  拿结果用            that.setData({                multiArray: [multiArray], //一位数组  二级 格式 multiArray: [multiArray,'']先复制二维的为空查询出来了再复制就行                objectMultiArray: [list,''], //objectMultiArray  把结果存在这个对象里面            })             console.log('list', list);            that.getDoctorGroup();        })      //监控选择      bindMultiPickerChange:function(e){        var that = this;        var value = that.data.value;        var values = that.data.values;        var d_value = e.detail.value[0];        if (value != d_value){            values[0] = d_value;            that.setData({                value: d_value,                values: values,             })            //查询下级的            that.getSonData();        }      },     //查询下级        var that = this;        var values = that.data.values;        var multiArray = that.data.multiArray;        var objectMultiArray =  that.data.objectMultiArray;        console.log('multiArray', multiArray);        console.log('values', values);        that.setData({ hidden: true });        util.post('url', {            id: objectMultiArray[0][values[0]].id,        },function (res) {            that.setData({ hidden: false });            var list = res.data.pageInfo.list;             var groupName = list.map(item => {    // 此方法将校区名称区分到一个新数组中                return item.groupName;             });            multiArray[1] = groupName;            objectMultiArray[1] = list,            that.setData({                multiArray: multiArray,                objectMultiArray: objectMultiArray,                sonid: list.length > 0 ? list[0].id : 0            })        })

 

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎