WeChat applet implementation of drop-down menu switching effect

Example of this article shared the specific code of the WeChat applet to achieve the drop-down menu switch display, for the reference, the specific content is as follows

renderings:

微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果 WXML:

微信小程序实现下拉菜单切换效果

{{first}}
 {second}     {{thirds}}          system reminder   Offer     Beijing   Shanghai   Shanghai   Shanghai      Beijing   Shanghai   Shanghai   Shanghai     Shanghai         Beijing   Shanghai   Shanghai  Sea       Beijing   Shanghai   Shanghai  Shanghai   Shanghai      Area    {{{i.  Custom area:     -           {{item.name}}       {ipiem.name}}       Renovation   {ipiem.name}}    Building category        Characteristic     {{item.name}}   

Clear condition WXSS: / * Drop-down menu * / / * below is Tobar * / # swiper-Tab {width: 100%; position: relative;} .swiper-tab {width: 100%; Text-Align : 25%; border: # 666; border: # 666; border-bottom: 0rpx Position: relative;} .swiper-tab-list i {position: absolute; bottom: 30%; Right: 14%; width: 0px; height: 0px; 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;} .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; ip: 0; anniMATION: displays 1s; @keyframes displays {helight: 0px;}}} .swiper-beijing {width: 100%; Height: 200%; Background: # 000; opacity: 0.5; position: absolute; top: 130px Left: 0; Display: none; z-index: 888; animation: 1s;} / * Switch in the pull-down switch* / .nav {Width: 20%; Height: 100Rpx; float: Left; flex-direction: row;} .default {width: 100%; line-height: 100rpx; text-align: center; color: # 000; Font-consisting: 28rpx; overflow: hidden;} .red {width: 100%; float: right; line-height: 100rpx; text-align: center; color: # f63; font-weight: Bold; font-size: 28 rpx;} .show {display: block; text-align: center; line-height: 200rpx;} .hidden {display: none; text: 200px;} # Rights {Width: 79%; float: right; border-left: solid 1px #eee; font-size: 15px; max-height: 600rpx; overflow-y: auto; overflow-x: hidden;} / * Add Class change Style * / .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 #ebebebec; 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;} / * // filter * / .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-height: 25px; width: 100%; Height: 25px; Text-align : center; float: Left;} .zidingyi {width: 95%; Height: 50px; margin: 0 auto; overflow: hidden;} .zidingyi span {float: Left; font-size: 16px; line-height: 40px; Color: # 666; margin-right: 15rpx;} .zidingyi INPUT {Width: 50px; padding-left: 10rpx; float: Left; margin-top: 10rpx; font-size: 15px; line-height: 40px; border: Solid 1px #eee; color: # 666;} .zidingyi p {float: Left; margin: 0 15rpx; line-height: 40px; color: # 666;} .zidinGii Button {Height: 28px; Float: Left; Margin: 10rpx 0 0 25rpx; font-size: 13px; line-height: 28px; / * border: Solid 1px #eee; * / color: # 666;} .qingkong { Width: 95%; Height: 40px; Margin: 40RPX Auto 30rpx;} .qingkong span {float: Left; width: 35%; Height: 33px; Border: 1px solid #eee; box-sign: border-box; color: # 666; font-size: 14px; font-weight: 300; text-align: center; line-height: 33px; border-radius: 3px;}. Qingkong p {float: Right; Width: 55%; Height: 35px Color: #fff; Font-Size: 14px; Font-Weight: 300; Text-Align: Center; Line-HEIGHT: 35PX; Background: RGBA (229, 65, 65, 0.95); border-radius: 3px;} JS: // BannerPage ({DATA: {// drop-down menu first: 'area', SECOND: 'Price', Thirds: 'Room', Fours: 'Screening', _Num: 0, _res: 0, // Filter Array: [{Name: 'Single Take'}, {Name: 'Parent Package'}, {Name: 'Event Package'}, {Name: ' Queen Package '}], Chaoxiang: [{Name:' Single Take '}, {Name:' Parent Package '}, {Name:' Event Package '}, {Name:' Queen Package '}], Louceng: [{ Name: 'Single Take'}, {Name: 'Parent Package'}, {Name: 'Event Package'}, {Name: 'Queen Package'}], ZhuangXiu: [{Name: 'Single Take'}, {Name : 'Parent-child Package'}, {Name: 'Event Package'}, {Name: 'Queen Package'}], Leibei: [{Name: 'Single Take'}, {Name: 'Parent Package'}, {Name: 'Event Package'}, {Name: 'Queen Package'}], TESE: [{Name: 'Single Take'}, {Name: 'Parent Package'}, {Name: 'Event Package'}, {Name: ' Queen Package '}], PAIXU: [{Name:' Single Take '}, {Name:' Parent Package '}, {Name:' Event Package '}, {Name:' Queen Package '}], One: 0, Two: 0, Third: 0, Four: 0, Five: 0, Six: 0, Seven: 0,}, ISSHOW: TRUE, CURRENTTAB: 0, // Downlink Hidenav: Function () {this.SetData ({Displays : "None"})}, // Region TABNAV: Function (e) {this.setdata ({Displays: "block"}) this.SetData ({SELECTED1: FALSE, SELECTED2: FALSE, SELECTED: TRUE})} (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})}}, / / Drake Switching Switching // Region Selected: Function (e) {this.setdata ({SELECTED1: FALSE, SELECTED2: FALSE, SELECTED: TRUE}}}}}}}}}}}}}}}}}}}} False, SELECTED2: FALSE, SELECTED1: TRUE}}}}}}, selected2: function (e) {this.setdata ({SELECTED: FALSE, SELECTED1: FALSE, SELECTED2: TRUE})}}}} Region 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)}, online: 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)}}}}}} { }, // Price Clicknum: Function (e) {console.log (e.target.dataset.num) this.setdata ({_num: e.target.dataset.num}) this.SetData ({second: ETArget.dataset.name}) THIS.SETDATA ({Displays: "none"}) var text = this.data.name console.log (text)}}, online: function (options) {}, // Room type Clickhouse: Function (e) {Console.log (e.target.dataset.num) this.setdata ({_res: e.target.dataset.num}) this.SetData ({thirds: e.target.dataset.name}). SetData ({Displays: "})}}}}}}}, online: function (options) {}, // Filter ChosetXtColor: Function (E) {var ID = E.CURRENTTARGET.DATASET.ID; // Get custom ID value Console.log (e.currenttarget.dataset.id) this.SetData ({One: id})}}}, chaoxiang: function (e) {var ID = E.CURRENTTARGET.DATASET.ID; // Get custom ID value THIS.SETDATA ({Two: id})}}}}}}}}}}}}: function (e) {var ID = E.cURRENTTARGET.DATASET.ID; / / Get custom ID value this.SetData ({third: id})}, ZhuangXiu: Function (e) {var ID = E.CURRENTTARGET.DATASET.ID; // Get custom ID value this.SetData ({four: id})}, leibei: function (e) {var ID = E.CURRENTTARGET. DataSet.ID; // Get custom ID value this.setdata ({FIVE: ID})}, test: function (e) {var ID = E.CURRENTTARGET.DATASET.ID; // Get custom ID value THIS.SETDATA ({Six: ID})}}}, paixu: function (e) {var ID = E.CURRENTTARGET.DATASET.ID; // Get custom ID value this.SetData ({seven: id})}}}} For everyone, it is recommended that WeChat applets that are relatively high attention is one: "WeChat applet development tutorial" Xiaobian is carefully organized, I hope I like it. The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment