How to realize the drop-down option box of wechat applet

This article mainly explains “ How to realize the drop-down option box of wechat applet ”, Interested friends might as well come and have a look . The method introduced in this paper is simple and fast , Practical . Now let Xiaobian take you to learn “ How to realize the drop-down option box of wechat applet ” Well !

design sketch

test.js

/**   *  Initial data of the page    */  data: {    shows: false, // Control the display and hiding of the drop-down list ,false hide 、true Show     selectDatas: [' Consumer accounts ', ' Platform rebate account ', ' Wechat Wallet '], // Data from the drop-down list     indexs: 0, // Selected drop-down column   Table subscript ,  },  //  Click the drop-down display box   selectTaps() {    this.setData({      shows: !this.data.shows,    });  },  //  Click on the drop-down list   optionTaps(e) {    let Indexs = e.currentTarget.dataset.index; // Get the subscript of the clicked drop-down list     console.log(Indexs)    this.setData({      indexs: Indexs,      shows: !this.data.shows    });  },

test.wxml

<view class='fenlei'>  <text> Address </text>  <!--  A drop-down box  -->    <view class='select_box'>      <view class='select' catchtap='selectTaps'>        <text class='select_text'>{{selectDatas[indexs]}}</text>        <!-- <image class='words_img' src='../../images/sanjiao.png'></image> -->        <image class='select_img {{shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image>      </view>      <view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'>        <text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text>      </view>    </view></view>

test.wxss

/* fenlei */.fenlei{  margin: 0 25rpx;  height: 90rpx;  line-height: 90rpx;  border-bottom: 1rpx solid #e6e6e6;  display: flex;  align-items: center;}.fenlei text{  font-size: 30rpx;  color: #999999;  margin-left: 15rpx;}/*  A drop-down box  */.select_box {  background: #fff;  width: 620rpx;  /* margin: 0 auto; */  height: 90rpx;  line-height: 90rpx;  text-align: left;  position: relative;}.select {  box-sizing: border-box;  width: 100%;  height: 86rpx;  /* border: 1px solid #efefef; */  border-radius: 8rpx;  display: flex;  align-items: center;  padding: 0 20rpx;}.select_text {  font-size: 28rpx;  flex: 1;  color: rgb(102, 102, 102);  line-height: 86rpx;  height: 86rpx;}.select_img {  width: 40rpx;  height: 40rpx;  display: block;  transition: transform 0.3s;}.select_img_rotate {  transform: rotate(180deg);}.option_box {  position: absolute;  top: 86rpx;  width: 100%;  /* border: 1px solid #efefef; */  box-sizing: border-box;  height: 0;  overflow-y: auto;  border-top: 0;  background: #fff;  transition: height 0.3s;  z-index: 100;}.option {  display: block;  line-height: 40rpx;  font-size: 28rpx;  border-bottom: 1px solid #efefef;  padding: 10rpx;  color: rgb(102, 102, 102);}

Here we are , I'm sure you're right “ How to realize the drop-down option box of wechat applet ” Have a deeper understanding of , You might as well put it into practice ！ This is the Yisu cloud website , For more relevant contents, you can enter the relevant channels for inquiry , Pay attention to our , Continue to learn ！