微信小程序做类似vue的级联选择功能，使用picker-view-column+checkbox-group完成

直接上图

主要代码

#wxml

<picker-view class="bj" indicator-style="height: 50px;" value="{{value}}" bindchange="bindChange">

<picker-view-column>

</checkbox-group> </view>

</picker-view-column>

<picker-view-column>

</checkbox-group></view>

</picker-view-column>

<picker-view-column>

</checkbox-group></view>

</picker-view-column>

</picker-view>

#js

// 初始渲染

getypeinfo(){

api.getshooltype({

success:res=>{

console.log(res);

this.setData({

typeshool:res

})

if(res[0].classifyId){

api.getshooltype_l({

data:{classifyId:res[0].classifyId},

success:val=>{

res.forEach(v=>{

v.selected=false

})

this.setData({

typeshool_l:val

})

if(val.length>0){

api.getshooltype_l({

data:{classifyId:val[0].classifyId},

success:value=>{

value.forEach(v=>{

v.selected=false

})

this.setData({

typeshool_k:value

})

}

})

}

})

}

})

// 一级分类点击

onclack(e){

const that =this

api.getshooltype_l({

data:{classifyId:e.mark.id},

success:res=>{

res.forEach(v=>{

if(that.data.getlist.indexOf(v.classifyId)==-1){

v.selected=false

}else{

v.selected=true

}

})

that.setData({

typeshool_l:res

})

if(res.length>0){

console.log(that.data.getlist);

api.getshooltype_l({

data:{classifyId:res[0].classifyId},

success:val=>{

val.forEach(l=>{

console.log(val);

if(that.data.getlist.indexOf(l.classifyId)==-1){

l.selected=false

}else{

console.log(123456);

l.selected=true

}

})

that.setData({

typeshool_k:val

})

}

})

}else{

console.log(123);

that.setData({

typeshool_k:[]

})

}

})

// 二级分类点击

onclack_k(e){

const that =this

api.getshooltype_l({

data:{classifyId:e.mark.id},

success:res=>{

res.forEach(v=>{

if(that.data.getlist.indexOf(v.classifyId)==-1){

v.selected=false

}else{

v.selected=true

}

})

that.setData({

typeshool_k:res

})

}

})

样式就不写了，第一次写写的不好，大佬勿喷，

微信小程序做类似vue的级联选择功能，使用picker-view-column+checkbox-group完成相关推荐

微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
python搭建微信小程序卖货要收费用吗_个人的微信小程序做店铺收费吗?要收多少...
微信小程序受到了广大用户的使用和喜爱,这种不用下载的应用,让人们能更快的开启和关闭应用,不用担心自己的内存不够.那么今天我们来了解下,个人的微信小程序做店铺收费吗?要收多少? 现在许多用了许多小程序了 ...
微信小程序做店铺收费吗？【微信小程序店铺】
很多商家企业现在都已经有自己的微信小程序店铺了,还没有的微信小程序店铺的商家企业也是计划开通自己的微信小程序店铺,那么对于他们来说,除了要知道怎么做微信小程序店铺,还需要了解微信小程序做店铺收费吗这个 ...
微信小程序做一个调查问卷
用微信小程序做了一个调查问卷功能描述: 用户一天只能进行一次问卷调查=>用户登录功能获取用户意见信息题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项多选题选择个数设置 ...
微信小程序做问卷——前端部分(回答问卷)
文章目录实现效果实现单选部分多选部分问答部分全部代码 item.wxml item.wxss item.js 生成问卷的部分参考微信小程序做问卷--前端部分(生成问卷) 实现效果界面如 ...
微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
微信小程序实现类似微信评论区回复组件(mpx)
mpx开发微信小程序实现回复组件效果组件内容: <template><view class="apply-component"><van-popu ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

微信小程序做类似vue的级联选择功能，使用picker-view-column+checkbox-group完成

微信小程序做类似vue的级联选择功能，使用picker-view-column+checkbox-group完成相关推荐

最新文章

热门文章