微信小程序/下拉选择

js

Page({
  data: {
    selectPerson: true,
    firstPerson: '个人',
    selectArea: false,
  },
  //点击选择类型
  clickPerson: function () {
    var selectPerson = this.data.selectPerson;
    if (selectPerson == true) {
      this.setData({
        selectArea: true,
        selectPerson: false,
      })
    } else {
      this.setData({
        selectArea: false,
        selectPerson: true,
      })
    }
  },
  //点击切换
  mySelect: function (e) {
    this.setData({
      firstPerson: e.target.dataset.me,
      selectPerson: true,
      selectArea: false,
    })
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

 

wxss

 

/* page/test/test.wxss */

.phone_personal{

width: 100%;

color:rgb(34, 154, 181);

height:100rpx;

line-height:100rpx;

text-align: center;

}

.phone_one{

display: flex;

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;

}

.select_one{

text-align: center;

background-color:rgb(239, 239, 239);

width:676rpx;

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);

}

 

 

wxml

 

 

<!--page/test/test.wxml-->

<view class="phone_one" bindtap="clickPerson">

<view class="phone_personal">{{firstPerson}}</view>

<image src="../../image/green_tri.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>

</view>

<view class="person_box">

<view class="phone_select" hidden="{{selectPerson}}">

<view class="select_one" bindtap="mySelect" data-me="你好">你好</view>

<view class="select_one" bindtap="mySelect" data-me="他好">他好</view>

<view class="select_one" bindtap="mySelect" data-me="大家好">大家好</view>

</view>

</view>