WeChat 애플릿에서 드롭다운 상자 효과를 얻는 방법은 무엇입니까? (코드 예)

이 기사의 내용은 WeChat 애플릿에서 드롭다운 상자 효과를 얻는 방법을 소개하는 것입니다. (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

WeChat 애플릿 구성 요소에는 드롭다운 상자가 없습니다. 그냥 사용하고 나중에 참조할 수 있도록 적어 두세요

wxml 코드:

<view>
    <view> 选择接收班级</view>
    <!-- 下拉框 -->
    <view>
      <text>{{grade_name}}</text>
      <image></image>
    </view>
    <!-- 下拉需要显示的列表 -->
    <view>
      <view>
        <view>{{item}}</view>
      </view>
    </view>
  </view>

wxss 코드:

/* 顶部 */.top{
  width: 100vw;
  height: 80rpx;
  padding: 0 20rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  border-bottom: 1px solid #000;
}.top-text{
  float: left}/* 下拉框 */.top-selected{
    width: 50%;
    display: flex;
    float: right;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0 10rpx;
    font-size: 30rpx;
}/* 下拉内容 */.select_box {
    background-color: #fff;
    padding: 0 20rpx;
    width: 50%;
    float: right;
    position: relative;
    right: 0;
    z-index: 1;
    overflow: hidden;
    text-align: left;
    animation: myfirst 0.5s;
    font-size: 30rpx;
}.select_one {
    padding-left: 20rpx;
    width: 100%;
    height: 60rpx;
    position: relative;
    line-height: 60rpx;
    border-bottom: 1px solid #ccc;
}/* 下拉过度效果 */@keyframes myfirst {
    from {
        height: 0rpx;
    }
 
    to {
        height: 210rpx;
    }}/* 下拉图标 */.top-selected image{
  height:50rpx;
  width:50rpx;
  position: absolute;
  right: 0rpx;
  top: 20rpx;
}

js 코드:

 /**
   * 页面的初始数据   */
  data: {
    select:false,
    grade_name:'--请选择--',
    grades: [        '猛犸机器人1班',        '猛犸机器人2班',        '口才1班',
      ]
  },/**
 *  点击下拉框 */
  bindShowMsg() {    this.setData({
      select: !this.data.select
    })
  },/**
 * 已选下拉框 */
  mySelect(e) {
    console.log(e)    var name = e.currentTarget.dataset.name    this.setData({
      grade_name: name,
      select: false
    })
  },

효과 표시:

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

위 내용은 WeChat 애플릿에서 드롭다운 상자 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!