Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of WeChat Mini Programs how to achieve the drop-down list, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this WeChat Mini Programs article on how to achieve the drop-down list. Let's take a look.

WeChat Mini Programs drop-down list

Wxml Code:

{{firstPerson}} / / the binocular method determines whether the picture should be rotated or not. Hello, he. Hello, everyone.

Wxss Code:

.phone _ personal {width: 100%; color:rgb (34,154,181); height:100rpx; line-height:100rpx; text-align: center;} .phone_one {display: flex; / / it is more convenient to use flex layout. Position: relative; justify-content: space-between; background-color:rgb (239,239,239); width:90%; height:100rpx; margin:0 auto; border-radius: 10rpx; border-bottom:2rpx solid rgb (255,255,255);} .person_box {position: relative;}. Phone_select {margin-top:0; z-index: 100; position: absolute; / / Mini Program z-index and absolute need to exist at the same time for the element to be detached from the document. }. Select_one {text-align: center; background-color:rgb (239,239,239); the percentage of the element width can no longer be used after width:676rpx; / / is separated from the document. Height:100rpx; line-height:100rpx; margin:0 5%; border-bottom:2rpx solid rgb (255,255,255);} .personal_image {z-index: 100; position: absolute; right:2.5%; width: 34rpx; height: 20rpx; margin:40rpx 20rpx 40rpx 0; transition: All 0.4s ease;-webkit-transition: All 0.4s ease;} .rotateRight {transform: rotate (180deg); / 180 °rotate the picture. }

Js Code:

Page ({data: {selectPerson:true, firstPerson:' personal', selectArea:false,}, / / Click to select type clickPerson:function () {var selectPerson = this.data.selectPerson If (selectPerson = = true) {this.setData ({selectArea:true, selectPerson:false,})} else {this.setData ({selectArea:false, selectPerson:true,})}, / / Click to switch mySelect:function (e) {this.setData ({firstPerson:e.target.dataset.me, selectPerson:true, selectArea:false,})} OnLoad:function (options) {/ / parameters brought by page initialization options for page jump}, onReady:function () {/ / page rendering completed}, onShow:function () {/ / page display}, onHide:function () {/ / page hiding} OnUnload:function () {/ / Page closed}}) this is the end of the article on "how WeChat Mini Programs implements the drop-down list". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve the drop-down list of WeChat Mini Programs". If you still want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.