Heim  >  Artikel  >  WeChat-Applet  >  WeChat-Applet implementiert Dropdown-Box (mit Code)

WeChat-Applet implementiert Dropdown-Box (mit Code)

php是最好的语言
php是最好的语言Original
2018-08-07 09:53:4413805Durchsuche

Es gibt keine Komponente im WeChat-Applet, die mit der Dropdown-Box in HTML identisch ist. Wenn Sie den gleichen Effekt wünschen, können Sie den Effekt nur zuerst selbst schreiben

WeChat-Applet implementiert Dropdown-Box (mit Code)

Schauen wir uns den Code an:

Zuerst WXML

<view class=&#39;select_box&#39;>
    <view class=&#39;select&#39; catchtap=&#39;selectTap&#39;>
        <text class=&#39;select_text&#39;>{{selectData[index]}}</text>
        <image class=&#39;select_img {{show&&"select_img_rotate"}}&#39; src=&#39;/image/gobottom.png&#39;></image>         
    </view>
    <view class=&#39;option_box&#39; style=&#39;height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;&#39;>
        <text class=&#39;option&#39; style=&#39;{{index==selectData.length-1&&"border:0;"}}&#39; wx:for=&#39;{{selectData}}&#39; wx:key=&#39;this&#39; data-index=&#39;{{index}}&#39; catchtap=&#39;optionTap&#39;>{{item}}</text>
    </view>
</view>
<!--
  show&&"select_img_rotate"-----给显示框右边的下拉箭头添加动画

  height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;-----给改变下拉框高度,实现下拉框的显示隐藏,每个下拉选项的高度为60,下拉框的最大高度这里设置的是300,所以这里写成当数据长度大于5时,下拉框高度为300,反之下拉框高度为数据长度乘以60

  index==selectData.length-1&&"border:0;"-----取消下拉选项的最后一个的下边框
  -->

und dann WXSS (wenn Sie keine Animation möchten, löschen Sie einfach Transition:transform 0,3s; und Übergang: Höhe 0,3s; in wxss)

page{
  background: #f3f7f7;
}
.select_box{
  background: #fff;
  width: 80%;
  margin: 30rpx auto;
  position: relative;
}
.select{
  box-sizing: border-box;
  width: 100%;
  height: 70rpx;
  border:1px solid #efefef;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}
.select_text{
  font-size: 30rpx;
  flex: 1;
}
.select_img{
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition:transform 0.3s;
}
.select_img_rotate{
  transform:rotate(180deg); 
}
.option_box{
  position: absolute;
  top: 70rpx;
  width: 100%;
  border:1px solid #efefef;
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
}
.option{
  display: block;
  line-height: 40rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
}

Hier sind JS

Page({

  data: {
    show:false,//控制下拉列表的显示隐藏,false隐藏、true显示
    selectData:[&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;5&#39;,&#39;6&#39;],//下拉列表的数据
    index:0//选择的下拉列表下标
  },
  // 点击下拉显示框
  selectTap(){
    this.setData({
      show: !this.data.show
    });
  },
  // 点击下拉列表
  optionTap(e){
    let Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    this.setData({
      index:Index,
      show:!this.data.show
    });
  },
  onLoad: function (options) {
  
  }

})

bezogene Empfehlungen:

Der Beispielcode des zu implementierenden WeChat-Applets Paging-Dropdown-Laden

Detaillierte Erläuterung der Implementierungsmethode der Pulldown-Aktualisierung und des Pullup-Ladens im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonWeChat-Applet implementiert Dropdown-Box (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn