精华内容
下载资源
问答
  • 微信小程序 二级联动(多级联动)

    千次阅读 2019-10-16 11:36:25
    这阵子公司突然需要开发小程序,于是乎恶补下,想必时间已过两年,小程序应该相当成熟了,未曾料到一个二级联动就各种模糊不清。官方给出案例,但是写的太乱,可读性差,还会写些多余的东西进去,容易误导我们这些...

    这阵子公司突然需要开发小程序,于是乎恶补下,想必时间已过两年,小程序应该相当成熟了,未曾料到一个二级联动就各种模糊不清。官方给出案例,但是写的太乱,可读性差,还会写些多余的东西进去,容易误导我们这些小白...于是开启了百度之路,看到网友写的博客深感痛心,竟然有直接copy官案,大家都是拿来主义,多余的也copy...算了还是自己动手吧。

    上代码:

    html:

    <picker mode="multiSelector" bindchange="bindQualificationChange" bindcolumnchange="bindQualificationColumnChange" value="{{qualificationIndex}}" range="{{qualificationArray}}">
       <view class="weui-select ellipsis" wx:if="{{qualificationName}}">{{qualificationName+(categoryBrandName?'-'+categoryBrandName:categoryBrandName)}}</view>
       <view class="weui-select" wx:else>请选择供应商要求</view>
    </picker>

    js:

    data:{
       qualificationIndex: ['0', '0'],//索引
        qualificationArray: [
          ['品牌/代理授权书', '经营许可证', '无'],
          ['同品类代理证', '同品牌-同品类代理证']
        ], //付款类型数组
        objectQualificationArray: [{//第二级
            "No": "1",
            "parid": "1",//表示第一级里的第一个
            "regname": "同品类代理证"
          },
          {
            "No": "2",
            "parid": "1",
            "regname": "同品牌-同品类代理证"
          },
            {
            "No": "3",
            "parid": "2",表示第一级里的第二个
            "regname": "请不要开车"
          }
        ],
        qualificationType: "", //	*供应商要求资质类型 0 品牌/代理授权书 1 经营许可证 2 软件代理资质 3 无
        qualificationName: "",//第一级名称
        categoryBrandType: "", //	*供应商要求品牌品类类型 0 同品牌 1 同品类品牌
        categoryBrandName: "",//第二级名称
    
    },
    bindQualificationChange: function (e) {//供应商要求
        let vm = this;
        vm.setData({
          "qualificationIndex[0]": e.detail.value[0],
          "qualificationIndex[1]": e.detail.value[1],
          "qualificationName": vm.data.qualificationArray[0][e.detail.value[0]],
          "categoryBrandName": vm.data.qualificationArray[1][e.detail.value[1]] || "",
          "qualificationType": e.detail.value[0], //	资质类型 
          "categoryBrandType": e.detail.value[1] || "", //	品牌品类类型
        })
      },
      bindQualificationColumnChange: function(e) {//供应商要求
        let vm = this;
        // console.log('修改的列为', e.detail.column, ',值为', e.detail.value, vm.data.objectQualificationArray);
        switch (e.detail.column) {
          case 0:
            let list = [];
            // 此循环是进行第二级分组赋值
            for (var i = 0; i < vm.data.objectQualificationArray.length; i++) {
              if (e.detail.value + 1 == vm.data.objectQualificationArray[i].parid) {
                list.push(vm.data.objectQualificationArray[i].regname)
              }
            }
            vm.setData({
              "qualificationArray[1]": list,
              "qualificationIndex[0]": e.detail.value,
              "qualificationIndex[1]": 0
            })
    
        }
      },
    
    
    

     

     

    效果图:

    鄙人比较懒就直接贴项目代码了,作为伸手党,毕竟别人的成果借鉴过来还是要消化的,不然永远都是借鉴

     

    参考文献:

    1、官方案例

    2、https://blog.csdn.net/sigesone/article/details/80611984 二级城市联动写的不错

    展开全文
  • 微信小程序二级联动

    2020-08-20 14:33:35
    levelContent:[ { value: '',name: '全部级别' }, { value: '国家',name: '国家' }, { value: '省级',name: '省级' }, { value: '市级',name: '市级' }, { value: '区/县级',name: '区/县级'...

    <view class="l-header _div">

      <view class="l-nav _ul">

        <view class="_li {{issortActive?'active':''}}" bindtap="sort">

        {{changeSortName}}

        </view>

        <view class="_li {{islevelActive?'active':''}}" bindtap="level">

        {{changeLevelName}}

        </view>

      </view>

      <view class="l-screen _div">

        <view class="l-step l-filtration _ul" style="height:auto;overflow:auto;" hidden="{{!issortActive}}">

          <view class="_li {{index==current?'active':''}}" wx:for="{{sortContent}}"> {{item.typeName}} </view>

        </view>

        <view class="l-area l-filtration _ul" hidden="{{!islevelActive}}">

          <view class="_li {{index==currentLevel?'active':''}}" wx:for="{{levelContent}}" v-on:click="changeLeveItem(index)">{{item.name}}</view>

        </view>

      </view>

    </view>

    <view class="i-shade _div" hidden="{{mask}}" bindtap="closeall"></view>

    const app = getApp()

     

    Page({

      data: {

        issortActive:false,

        islevelActive:false,

        sortShow:false,

        levelShow:false,

        mask:true,

        changeSortName:"类别",

        changeLevelName:"级别",

        sortContent: [

          {id: "",typeName: "类别0"},

          {id: "",typeName: "类别1"},

          {id: "",typeName: "类别2"},

          {id: "",typeName: "类别3"},

          {id: "",typeName: "类别4"},

        ],

        levelContent:[

          { value: '',name: '全部级别' },

          { value: '国家级',name: '国家级' },

          { value: '省级',name: '省级'  },

          { value: '市级',name: '市级' },

          { value: '区/县级',name: '区/县级' },

        ],

      },

      onLoad: function () {

        

      },

      changeItem:function(index){

        this.current=index;

        this.closeall();

      },

      changeLeveItem:function(index){

        this.currentLevel=index;

        this.closeall();

      },

      closeall:function(){

        this.islevelActive = false;

        this.issortActive = false;

        this.mask = true;

        this.setData({

          islevelActive:this.islevelActive,

          issortActive:this.issortActive,

          mask:this.mask

        })

      },

      sort:function(){

          this.islevelActive = false;

          this.issortActive = !this.issortActive;

          if(this.islevelActive||this.issortActive){

            this.mask = false;

          }else{

            this.mask = true;

          }

          this.setData({

            islevelActive:this.islevelActive,

            issortActive:this.issortActive,

            mask:this.mask

          })

      },

      level:function(){

        this.issortActive = false;

        this.islevelActive = !this.islevelActive;

        if(this.islevelActive||this.issortActive){

          this.mask = false;

        }else{

          this.mask = true;

        }

        this.setData({

          issortActive:this.issortActive,

          islevelActive:this.islevelActive,

          mask:this.mask

        })

      },

    })

    .l-header {

      background-color: #ffffff;

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      z-index: 15;

    }

    .l-nav {

      display: flex;

      justify-content: space-between;

      border-bottom: 1px solid #cdcdcd;

      position: relative;

      padding: 0;

    }

    .l-nav ._li {

      list-style: none;

      text-align: center;

      width: 50%;

      padding: 18rpx 0;

      font-size: 30rpx;

      position: relative;

      color: #333333;

    }

    .l-nav ._li:after {

      content: '';

      width: 0px;

      height: 0px;

      border: 10rpx solid transparent;

      border-top-color: #333;

      position: relative;

      top: 22rpx;

      left: 12rpx;

    }

     

    .l-nav .active {

      position: relative;

      color: #DC3023;

    }

    .l-nav .active:after {

      content: '';

      top: -20rpx;

      width: 0px;

      height: 0px;

      border: 10rpx solid transparent;

      border-bottom-color: #DC3023;

    }

    .l-step,

    .l-area,

    .l-place {

      /* display: none; */

      font-size: 28rpx;

    }

    .l-step ._li,

    .l-area ._li,

    .l-place ._li {

      padding: 20rpx 20rpx;

      border-bottom: 1px solid #cdcdcd;

      color: #666;

    }

    .l-step .active,

    .l-area .active,

    .l-place .active {

      color: #DC3023;

      position: relative;

    }

    .l-step .active:after,

    .l-area .active:after,

    .l-place .active:after {

      content: '';

      position: absolute;

      top: 30rpx;

      right: 30rpx;

      width: 30rpx;

      height: 22rpx;

      background-repeat: no-repeat;

      background-size: 100% 100%;

    }

    .i-shade {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.5);

      z-index: 11;

      /* display: none; */

    }

     

    展开全文
  • 微信小程序二级联动省市

    千次阅读 2017-07-12 15:32:33
    这是一个微信小程序省市的两级联动,小伙伴们可以参考写三级联动

    1.先看一下效果


    2.先看下一下布局文件

    布局有一个弹框和点击按钮组成,弹框为隐藏,点击可以弹出选择城市

    <!--城市选择弹框start-->
    <view class="location-select" wx:if="{{pickerInfo.state == true}}">
      <view class="location-picker">
        <view class="location-picker-top flex-center-center">
          {{pickerInfo.title}}
        </view>
        <picker-view class="location-picker-view" value="{{pickerInfo.value}}" indicator-style="height: 50px;" bindchange="updatePicker">
          <picker-view-column>
            <view wx:for="{{pickerInfo.provinces}}" class="picker-province-item">
              {{item.provinceName}}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{pickerInfo.citys}}" class="picker-city-item">
              {{item.cityName}}
            </view>
          </picker-view-column>
        </picker-view>
        <!--取消和确定-->
        <view class="location-picker-bottom">
          <view class="picker-bottom-left" bindtap="updateLocationInfo" data-title="cancel">
            {{pickerInfo.submits[0]}}
          </view>
          <view class="picker-bottom-right" bindtap="updateLocationInfo" data-title="select">
            {{pickerInfo.submits[1]}}
          </view>
        </view>
      </view>
    </view>
    <!--城市选择弹框end-->
    
    
    <button bindtap="updateLocationInfo" data-title="state">点击弹出城市选择弹框:{{defaults.cityName}}</button>


    3.JS代码

    点击按钮弹出选择框,获取省列表(demo用本地数据代替),根据选择省的ID获取网络的城市列表(demo用本地数据代替),最后在按钮上设置选择结果

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
    
        defaults: {
          cityName: '南京',
        },
        // 城市选择弹框
        pickerInfo: {
          'state': false, 'title': '选择城市', 'value': [0, 0],
          'submits': ['取消', '确定'],
        },
    
        // 省列表
        provinceList: [
          {
            provinceID: 1,
            provinceName: '北京市'
          },
    
          {
            provinceID: 10,
            provinceName: '江苏省'
          },
    
          {
            provinceID: 12,
            provinceName: '安徽省'
          },
        ],
    
        //市列表
        cityList: [
          {
            cityID: 1,
            cityName: '北京市'
          },
          {
            cityID: 63,
            cityName: '南京市'
          },
    
          {
            cityID: 64,
            cityName: '无锡市'
          },
    
          {
            cityID: 78,
            cityName: '合肥市'
          }
        ]
    
    
      },
    
      onLoad: function () {
    
      },
    
      //点击变更地点信息
      updateLocationInfo: function (event) {
        var that = this
        var title = event.currentTarget.dataset.title
        var pickerInfo = that.data.pickerInfo
    
    
        // 判断是否是button
        if (title == 'state') {
          pickerInfo.state = true
          pickerInfo.value = [0, 0]
          pickerInfo.citys = []
          that.setData({
            pickerInfo: pickerInfo
          });
    
          //此处应该请求网络数据,为了方便我写了一些数据进行测试,获取省列表
          var provinceList = that.data.provinceList;
          pickerInfo.provinces = provinceList;
    
          that.setData({
            pickerInfo: pickerInfo
          });
    
        } else if (title == 'cancel') {
          pickerInfo.state = false
          that.setData({
            pickerInfo: pickerInfo
          })
        } else {
          // 设置选择结果
          pickerInfo.state = false;
    
          var defaults = that.data.defaults
    
          var cityNum = pickerInfo.value[1]
          var cityInfo = pickerInfo.citys[cityNum]
          defaults.cityName = cityInfo.cityName
    
          that.setData({
            pickerInfo: pickerInfo,
            defaults: defaults,
          });
    
          // that.getCountyList();此处可以继续模仿选择区域
    
        }
    
      },
    
      //选择城市,通过bindchange和省ID获取城市列表
      updatePicker: function (event) {
        var that = this;
        var pickerInfo = that.data.pickerInfo;
        var num = event.detail.value[0];
        var cityNum = event.detail.value[1];
    
        // var requestInfo = {};
        // 此处根据省ID通过网络获取城市列表,这里我用本地数据代替
        // requestInfo.provinceID = pickerInfo.provinces[num].provinceID;
        var cityList = that.data.cityList;
        pickerInfo.citys = cityList;
        pickerInfo.value = [num, cityNum];
    
        that.setData({
          pickerInfo: pickerInfo
        });
    
      },
    })
    

    4.最后是CSS文件
    /*城市选择弹框start*/
    .location-select {
      position: absolute;
      width: 750rpx;
      height: 100%;
      background-color: rgba(00, 00, 00, 0.3);
      z-index: 2;
      font-size: 14px;
      font-family: "lucida grande",
                     "lucida sans unicode",
                     lucida,
                     helvetica,
                     "Hiragino Sans GB",
                     "Microsoft YaHei",
                     "WenQuanYi Micro Hei",
                     sans-serif;
    }
    
    .location-picker {
      float: left;
      margin-top: 50px;
      margin-left: 25rpx;
      width: 700rpx;
      height: 300px;
      border-radius: 5rpx;
      background-color: white;
    }
    
    .location-picker-top {
      float: left;
      width: 700rpx;
      height: 49px;
      border-bottom: solid;
      border-bottom-color: #eee;
      border-bottom-width: 1px;
    }
    
    .location-picker-bottom {
      float: left;
      width: 700rpx;
      height: 49px;
      border-top: solid;
      border-top-width: 1px;
      border-top-color: #eee;
    }
    
    .picker-bottom-left {
      float: left;
      margin-left: 300rpx;
      line-height: 50px;
      height: 50px;
      width: 200rpx;
      font-size: 16px;
      color: #707070;
      text-align: center;
    }
    
    .picker-bottom-right {
      float: left;
      line-height: 50px;
      height: 50px;
      width: 200rpx;
      font-size: 16px;
      color: #06ccb6;
      text-align: center;
    }
    
    .picker-top-title {
      font-size: 20px;
      color: #000;
      line-height: 50px;
    }
    
    .location-picker-view {
      float: left;
      width: 700rpx;
      height: 200px;
      line-height: 50px;
      background-color: #eee;
    }
    
    .location-picker-column {
      background-color: orange;
    }
    
    .picker-province-item {
      line-height: 50px;
      height: 50px;
      width: 200rpx;
      margin-left: 10rpx;
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    
    .picker-city-item {
      line-height: 50px;
      height: 50px;
      width: 200rpx;
      margin-left: 10rpx;
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    
    .picker-college-item {
      line-height: 50px;
      height: 50px;
      width: 280rpx;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    
    /*城市选择弹框end*/


    项目地址:

    CSDN:http://download.csdn.net/download/qq_26014653/9896407

    GitHub:https://github.com/scYao/WeChat

    展开全文
  • 小程序二级联动下拉框 vant picker

    千次阅读 2019-11-30 22:03:46
    vant官方提供得例子是什么鬼,谁家数据结构会是这种。。。无语了 const citys = { '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], '福建': ['福州', '厦门', '莆田', '三明', '泉州'] ...

    vant官方提供得例子是什么鬼,谁家数据结构会是这种。。。无语了

    const citys = {
      '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      '福建': ['福州', '厦门', '莆田', '三明', '泉州']
    };
    

    经我改造直接上代码

    1、value-key 是json中要显示得文字

     <van-picker columns="{{ columns }}" value-key="name" bind:change="onChange" />

    2、js

    
    const citys = {   //想办法把数据结构变成这种,key得名字可以随便,结构一致就行
      '浙江':{
        name: '浙江',
        value: '1',
        list: [{ name: '浙江1', value: 10 }, { name: '浙江2', value: 12 }]
      },
      '福建':{
        name: '福建',
        value: '2',
        list: [{ name: '浙江3', value: 22 }, { name: '浙江4', value: 33 }]
      }
    }
    Page({
      data: {
        columns: [ 
          {
            values: Object.keys(citys).map(key => citys[key].name), //返回出来得是['浙江','福建']
          },
          { 
            values: citys['浙江'].list, //返回出来得是[{ name: '浙江1', value: 10 }, { name: '浙江2', value: 12 }]
            defaultIndex: 2
          }
        ]
      },
      onChange(event) {
        const { picker, value, index } = event.detail;
        picker.setColumnValues(1, citys[value[0]].list);  
      }
    })

    绝对好使,js哪里不懂,自己console一下数据看看就懂了

    展开全文
  • WXML <view class="section"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">...
  • 小程序二级分类联动,之前上传的有bug,资源压缩包不能重复上传。重新上传了一个。修改了二级分类的数组问题
  • 微信小程序省市二级联动picker ** 微信小程序官方文档上的的picker是省市区三级联动,有时我们只需要二级联动,这就需要我们自己作修改,之前在网上也查找了很多资料,省市数据都不太完善,今天做了一个相对完善的...
  • 省市区三级联动相对比较简单 可以用小程序中的pickre组件直接实现 省市二级的话没办法直接实现 下面是自己写的一个 前端自己实现 (当然也可以通过接口返回) ##创建一个city.js文件 下面有给出js文件 ##在需要用到...
  • 本文实例为大家分享了微信小程序级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例; 2,省市区选择器...
  • picker官方文档链接由于项目需求,需要使用省市2级联动选择器,由于官方默认提供的是省市区3级联动选择器,所以自己封装了一个2级选择器wxml文件&lt;view class="section"&gt; &lt;view ...
  • 微信小程序级联动

    千次阅读 2020-02-15 13:02:55
    由于只是两级联动,所以我们只需要关心列的变化即可,当列发生变化的时候从原始数据(原始的对象列表)根据序号找到对应的数据的孩子,赋值到位数组的第列。 列变化为1的时候从rawData中找到rawData[1]的...
  • 微信小程序picker组件,省市二级联动及其修改时进行回显,文件只提供参考,希望给需要的朋友带来帮助。
  • 小程序 ——— picker二级联动封装版

    万次阅读 2018-08-11 16:54:19
    这个事情是这个样子的 , 最近我们在做一个关于酒店的小程序 , 老板突发奇想,觉得我们必须要做的跟别人不一样! “我就是我,是不一样的烟火~” 于是老板说,我们添加一个让顾客选房间号的功能。 想想都美滋滋,想想...
  • 小程序picker自定义二级联动

    千次阅读 2019-06-05 10:59:55
    项目中遇到只需要选择年月,找到一个三级联动的例子改的 WXML <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" ...
  • 小程序picker实现二级联动

    千次阅读 2019-11-15 16:32:02
    先上效果图: 结构这个样子的: <view class="edit_group_picker"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multi...
  • 小程序-城市联动(二级) <div class="item"> <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"&...
  • picker wxml代码 &amp;lt;view class=&quot;section&quot;&amp;...二级实例&amp;lt;/view&amp;gt; &amp;lt;picker mode=&quot;multiSelector&quot;
  • wxml <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">  <view class="picker">...
  • 一、二级联动 1)效果 2)实现 <view class="section"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value...
  • 微信小程序二级联动下拉列表

    千次阅读 2019-07-22 23:41:30
    <view class="section"> <view class="section__title">多列选择器</view> <picker mode="multiSelector" class='asdas' bindchange="bindMultiPickerChange" bindcolumnchange=...
  • 微信小程序侧边栏二级联动

    千次阅读 2019-06-24 10:12:22
    实现效果如下 实现步骤 样式布局(.wxml文件) <scroll-view scroll-y="{{true}}" style="height:{{height}}px;" class="nav-right-menu">...-- 一菜单 --> <view class="nav-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,681
精华内容 3,072
关键字:

小程序二级联动