微信小程序/下拉选择

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: 100 rpx;

line-height: 100 rpx;

text-align: center;

}

.phone_one{

display: flex;

position: relative;

justify-content: space-between;

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

width: 90%;

height: 100 rpx;

margin: 0 auto;

border-radius: 10 rpx;

border-bottom: 2 rpx 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: 676 rpx;

height: 100 rpx;

line-height: 100 rpx;

margin: 0 5%;

border-bottom: 2 rpx solid rgb( 255, 255, 255 );

}

.personal_image{

z-index: 100;

position: absolute;

right: 2.5%;

width: 34 rpx;

height: 20 rpx;

margin: 40 rpx 20 rpx 40 rpx 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 >