uniapp 自定义下拉框 |
您所在的位置：网站首页 › layout模板框 › uniapp 自定义下拉框 |
uniapp 自定义下拉框
|
uniapp 自定义下拉框
根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master 自己加了一层封装 可以进行切换选择下拉内容
模板 在components下创建ren-dropdown-filter/ren-dropdown-filter.vue 图标的引用 和颜色 可以自己进行修改 {{ child.text.length>numberSlit?child.text.slice(0,numberSlit)+'...':child.text }} {{ item.type.length>numberSlit? item.type.slice(0,numberSlit):item.type }} 请选择{{ navData[actNav?actNav:0].type }} {{ item.text }} export default { props: { height: { type: Number, default: 108 }, top: { type: String, default: 'calc(var(--window-statsu-bar) + 44px)' }, border: { type: Boolean, default: false }, filterData: { //必填 type: Array, default: () => { return []; }}, defaultIndex: { //默认选中条件索引,超出一类时必填 type: Array, default: () => { return []; } } }, data() { return { numberSlit:4, navData: [], // 强制刷新页面 updata: true, popupShow: false, showMask: false, actNav: null, selDate: '选择日期', selIndex: [] //选中条件索引 }; }, created() { this.navData = this.filterData; let arr =[] if(this.defaultIndex===undefined ||this.defaultIndex===null||this.defaultIndex.toString()==='[]' || this.defaultIndex.length===0){ this.navData.forEach((item,index)=>{ arr.push(0) }) }else{ arr=this.defaultIndex } this.selIndex = arr; this.keepStatus(); }, methods: { keepStatus() { this.navData.forEach(itemnavData => { // console.log(itemnavData.children) itemnavData.children.map(child => { child.select = false; }); return itemnavDat }); for (let i = 0; i < this.navData.length; i++) { let selindex = this.selIndex[i]; this.navData.forEach(item => { this.navData[i].children[selindex].select = true; }) } }, navClick(index) { if (index === this.actNav) { this.tapMask(); return; } this.popupShow = true; this.showMask = true; this.actNav = index; }, handleOpt(index) { this.updata = false this.selIndex[this.actNav] = index; this.keepStatus(); let data = []; let res = this.navData.forEach(item => { let obj = {} item.children.filter(child => { if (child.select) { obj = child } }); data.push(obj) }); this.keepStatus() this.updata = true this.$emit('onSelected', data); }, dateClick() { this.tapMask(); }, tapMask() { this.showMask = false; this.popupShow = false; this.actNav = null; }, handleDate(e) { let d = e.detail.value; this.selDate = d; this.$emit('dateChange', d); }, discard() {} } }; page { font-size: 28rpx; } .c-flex-align { display: flex; align-items: center; } .bgtype{ background-color: $bg-c36; } .c-flex-center { display: flex; align-items: center; justify-content: center; flex-direction: column; } .filter-wrapper { position: fixed; left: 0; width: 100%; z-index: 999; .inner-wrapper { .navs { position: relative; height: 110rpx; padding: 0 40rpx; display: flex; align-items: center; justify-content: space-between; background-color: #fff; border-bottom: 2rpx solid #f5f6f9; color: #8b9aae; z-index: 999; box-sizing: border-box; &>view { flex: 1; height: 100%; flex-direction: row; z-index: 999; } .date { justify-content: flex-end; } .actNav { color: #4d7df9; font-weight: bold; } } .mask { z-index: 666; position: fixed; top: calc(var(--status-bar-height) + 44px); left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); transition: background-color 0.15s linear; &.show { background-color: rgba(0, 0, 0, 0.4); } &.hide { display: none; } } .popup { position: relative; max-height: 500rpx; background-color: #fff; border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx; overflow: scroll; z-index: 999; transition: all 1s linear; opacity: 0; display: none; .item-opt { height: 100rpx; padding: 0 40rpx; color: #8b9aae; border-bottom: 2rpx solid #f5f6f9; } .actOpt { color: #4d7df9; font-weight: bold; position: relative; &::after { content: '✓'; font-weight: bold; font-size: 36rpx; position: absolute; right: 40rpx } } } .popupShow { display: block; opacity: 1; } } .icon-triangle { width: 16rpx; height: 16rpx; margin-left: 10rpx; } } uni-view { // padding:0 40rpx; padding: 0 20rpx 0 40rpx; justify-content: space-between; } } |
【本文地址】
今日新闻 |
推荐新闻 |