天津市住房城乡建设部网站,淄博网站建设团队,万维网站域名,广告设计模板素材图片前言
最近又收到了一个需求#xff0c;需要在uniapp 小程序上做一个下拉筛选框#xff0c;然后找了一下插件市场#xff0c;确实有找到#xff0c;但不过他不支持搜索#xff0c;于是乎#xff0c;我就自动动手#xff0c;进行了二开定制#xff0c;站在巨人的肩膀上需要在uniapp 小程序上做一个下拉筛选框然后找了一下插件市场确实有找到但不过他不支持搜索于是乎我就自动动手进行了二开定制站在巨人的肩膀上哈哈哈哈具体的效果如下 视频效果 链接 一、核心代码
view classfilter-wrapper:style{ top: top,border-top:border?1rpx solid #f2f2f2:none, }touchmove.stop.preventdiscardview classinner-wrapperview classmask :classshowMask ? show : hide taptapMask/viewview classnavs :style{backgroundColor:bgColor}view classc-flex-align :class{ c-flex-center: index 0, actNav: index actNav }v-for(item, index) in navData :keyindex clicknavClick(index,item)view v-for(child, childx) in item :keychildx v-ifchild.select:class[child.text.length4?navTextClass:]{{ child.text.indexOf(全部)!-1?child.text.split(全部)[1]:child.text }}/viewimage srchttp://s08dznyms.hd-bkt.clouddn.com/wechat/up.png mode classicon-trianglev-ifindex actNav /imageimage srchttp://s08dznyms.hd-bkt.clouddn.com/wechat/down.png mode classicon-trianglev-ifindex ! actNav /image/view/viewscroll-view scroll-ytrue classpopup :classpopupShow ? popupShow : view v-if!changeType!-- 自定义搜索 --view classinputClassview stylewidth:75%u-input :placeholderplaceHolderName prefixIconsearchprefixIconStylefont-size: 22px;color: #909399;color:rgba(36, 107, 183, 1);shapecircle changechange v-modelsearchValue/u-input/viewview classtotalClass共text stylecolor:rgb(33, 107, 228){{totalNum}}/text条/view/viewview v-ifnavData[actNav].length0 classitem-opt c-flex-align1:classitem.select ? actOpt : v-for(item, index) in navData[actNav] :keyindexclickhandleOpt(index,item){{ item.text }}/viewview v-ifresult.length0 classnoDataClass 暂无数据 /view/view/scroll-view/view/view二、js 部分部分
changeData(index, data) {this.$set(this.navData, index, data)console.log(this.navData)this.selIndex this.defaultIndex;this.keepStatus(init);},change(e) {console.log(this.copyNavData[this.actNav][0].text)this.result this.copyNavData[this.actNav].filter(item item.text.indexOf(e) ! -1)this.$set(this.navData, this.actNav, this.result)setTimeout(() {this.totalNum this.navData[this.actNav].length}, 200)},keepStatus(type) {if (type init) {this.navData.forEach(itemnavData {itemnavData.map(child {child.select false;});return itemnavData;});for (let i 0; i this.selIndex.length; i) {let selindex this.selIndex[i];this.navData[i][selindex].select true;}this.copyNavData JSON.parse(JSON.stringify(this.navData));} else {this.copyNavData.forEach(itemnavData {itemnavData.map(child {child.select false;});return itemnavData;});for (let i 0; i this.selIndex.length; i) {let selindex this.selIndex[i];this.copyNavData[i][selindex].select true;}}console.log(this.copyNavData)},总结
总体来说进行二次开发的难度不大关键是需要看的懂代码然后进行二次开发就不难了
如果需要完整的demo 代码请联系1015095073qq.com
