最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序实现下拉菜单切换效果
时间:2022-06-25 15:29:40 编辑:袖梨 来源:一聚教程网
本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下
效果图:
wxml:
{{first}} {{second}} {{thirds}} {{fours}} 系统提醒 优惠活动 优惠活动 北京 上海 上海 上海 上海 上海 北京 上海 上海 上海 北京 上海 上海 北京 上海 上海 上海 上海 上海 上海 北京 上海 上海 上海 上海 上海 上海 面积 {{item.name}} 自定义面积: -
朝向 {{item.name}} 楼层 {{item.name}} 装修 {{item.name}} 建筑类别 {{item.name}} 特色 {{item.name}} 排序 {{item.name}} 清除条件 确认
wxss:
css;">/*下拉菜单 */ /* 下面是tobar */ #swiper-tab { width: 100%; position: relative; } .swiper-tab { width: 100%; text-align: center; line-height: 80rpx; background-color: white; } .swiper-tab-list { font-size: 30rpx; display: inline-block; width: 25%; color: #666; border-bottom: 0rpx; position: relative; } .swiper-tab-list i { position: absolute; bottom: 30%; right: 14%; border: 5px solid #4e4e4e; border-top-color: #4e4e4e; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .on { color: #f63; border-bottom: 2rpx solid #f63; } .on i { border: 5px solid #f63; border-top-color: #f63; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; } .swiper-box view { text-align: center; } .swiper-item { background: #fff; width: 100%; height: 600rpx; display: none; position: absolute; top: 100rpx; z-index: 333333; left: 0; animation: displays 1s; } @keyframes displays { from { } to { height: 600rpx; } } .swiper-beijing { width: 100%; height: 200%; background: #000; opacity: 0.5; position: absolute; top: 130px; left: 0; display: none; z-index: 888; animation: 1s; } /* 下拉切换中的切换 */ .nav { width: 20%; height: 100rpx; float: left; flex-direction: row; } .default { width: 100%; line-height: 100rpx; text-align: center; color: #000; font-weight: bold; font-size: 28rpx; overflow: hidden; } .red { width: 100%; float: right; line-height: 100rpx; text-align: center; color: #f63; font-weight: bold; font-size: 28rpx; } .show { display: block; text-align: center; line-height: 200rpx; } .hidden { display: none; text-align: center; line- } #rights { width: 79%; float: right; border-left: solid 1px #eee; font-size: 15px; max-height: 600rpx; overflow-y: auto; overflow-x: hidden; } /*添加class改变样式 */ .location_bottom { width: 100%; height: 400rpx; line-height: 140rpx; color: #d91f16; font-size: 28rpx; padding: 0 20rpx; align-items: center; } .add_city { width: 90%; display: block; height: 70rpx; line-height: 70rpx; border-bottom: 2rpx solid #ebebeb; color: #000; padding-left: 5%; } .add_adress { height: 70rpx; line-height: 70rpx; border-bottom: 2rpx solid #f63; color: #f63; } .add_adre { height: 70rpx; line-height: 70rpx; border-bottom: 2rpx solid #f63; color: #f63; } .add_citying { padding-left: 5%; height: 70rpx; line-height: 70rpx; border-bottom: 2rpx solid #f63; color: #f63; } .add_House { padding-left: 5%; height: 70rpx; line-height: 70rpx; border-bottom: 2rpx solid #f63; color: #f63; } /*// 筛选 */ .shaixuankuang { width: 100%; height: 600rpx; overflow: hidden; max-height: 600rpx; overflow-y: auto; overflow-x: hidden; } .shaixuan { width: 100%; height: auto; overflow: hidden; } .shuaixuantiaojian { width: 95%; padding: 0 2.5% 1%; display: block; font-size: 15px; color: #999; } .chose-txt { /* border-radius: 6px; */ font-size: 26rpx; width: 29%; margin: 4px 14rpx; float: left; } .chose-p { line- width: 100%; text-align: center; float: left; } .zidingyi { width: 95%; margin: 0 auto; overflow: hidden; } .zidingyi span { float: left; font-size: 16px; line- color: #666; margin-right: 15rpx; } .zidingyi input { padding-left: 10rpx; float: left; margin-top: 10rpx; font-size: 15px; line- border: solid 1px #eee; color: #666; } .zidingyi p { float: left; margin: 0 15rpx; line- color: #666; } .zidingyi button { float: left; margin: 10rpx 0 0 25rpx; font-size: 13px; line- /* border: solid 1px #eee; */ color: #666; } .qingkong { width: 95%; margin: 40rpx auto 30rpx; } .qingkong span { float: left; width: 35%; border: 1px solid #eee; box-sizing: border-box; color: #666; font-size: 14px; font-weight: 300; text-align: center; line- border-radius: 3px; } .qingkong p{ float: right; width: 55%; color: #fff; font-size: 14px; font-weight: 300; text-align: center; line- background: rgba(229,65,65,0.95); border-radius: 3px; }
js:
//banner Page({ data: { // 下拉菜单 first: '区域', second: '售价', thirds: '房型', fours: '筛选', _num: 0, _res: 0, // 筛选 array: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], chaoxiang: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], louceng: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], zhuangxiu: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], leibei: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], tese: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], paixu: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }], one: 0, two: 0, third: 0, four: 0, five: 0, six: 0, seven: 0, }, isShow: true, currentTab: 0, // 下拉切换 hideNav: function () { this.setData({ displays: "none" }) }, // 区域 tabNav: function (e) { this.setData({ displays: "block" }) this.setData({ selected1: false, selected2: false, selected: true }) if (this.data.currentTab === e.target.dataset.current) { return false; } else { var showMode = e.target.dataset.current == 0; this.setData({ currentTab: e.target.dataset.current, isShow: showMode }) } }, // 下拉切换中的切换 // 区域 selected: function (e) { this.setData({ selected1: false, selected2: false, selected: true }) }, selected1: function (e) { this.setData({ selected: false, selected2: false, selected1: true }) }, selected2: function (e) { this.setData({ selected: false, selected1: false, selected2: true }) }, // 下拉菜单1 2 3 4 // 区域 clickSum: function (e) { console.log(e.target.dataset.num) this.setData({ _sum: e.target.dataset.num }) this.setData({ first: e.target.dataset.name }) this.setData({ displays: "none" }) var text = this.data.name console.log(text) }, onLoad: function (options) { }, clickMum: function (e) { console.log(e.target.dataset.num) this.setData({ _mum: e.target.dataset.num }) this.setData({ displays: "none" }) var text = this.data.name console.log(text) }, onLoad: function (options) { }, clickCum: function (e) { console.log(e.target.dataset.num) this.setData({ _cum: e.target.dataset.num }) this.setData({ displays: "none" }) var text = this.data.name console.log(text) }, onLoad: function (options) { }, // 售价 clickNum: function (e) { console.log(e.target.dataset.num) this.setData({ _num: e.target.dataset.num }) this.setData({ second: e.target.dataset.name }) this.setData({ displays: "none" }) var text = this.data.name console.log(text) }, onLoad: function (options) { }, // 房型 clickHouse: function (e) { console.log(e.target.dataset.num) this.setData({ _res: e.target.dataset.num }) this.setData({ thirds: e.target.dataset.name }) this.setData({ displays: "none" }) }, onLoad: function (options) { }, // 筛选 choseTxtColor: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 console.log(e.currentTarget.dataset.id) this.setData({ one: id }) }, chaoxiang: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 this.setData({ two: id }) }, louceng: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 this.setData({ third: id }) }, zhuangxiu: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 this.setData({ four: id }) }, leibei: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 this.setData({ five: id }) }, tese: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 this.setData({ six: id }) }, paixu: function (e) { var id = e.currentTarget.dataset.id; //获取自定义的ID值 this.setData({ seven: id }) } })
相关文章
- 空洞骑士丝之歌存档怎么保存 手动备份与云存档方法介绍 09-10
- 原神挪德卡莱兑换码是什么 挪德卡莱限时最新兑换码大全 09-10
- 空洞骑士丝之歌XGP与Steam存档互通吗 双平台存档转换方法介绍 09-10
- 空洞骑士丝之歌MOD怎么安装 MOD安装步骤指南 09-10
- 禁闭求生2怎么做泥土弹 泥土弹制作方法 09-10
- 禁闭求生2碎石弹药怎么做 碎石弹药制作攻略 09-10