小程序自定义城市下拉菜单

搞了一天，只能说明我菜

wxml

<view class='address'>
    <view class='com-sContent' bindtap='selectToggle'>
       <image src="../../../assets/icon/address.png" class="ad-img"></image>
        <view class='com-sTxt'>{{city_name}}</view>
        <image  src="../../../assets/icon/xia.png"  class='com-sImg' animation="{{animationData}}"></image>
    </view>
    <view class='com-sList' wx:if="{{selectShow}}">
        <view wx:for="{{currentCity}}" data-index="{{index}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.city_name}}</view>
   
    </view>
</view>

js

data: {
     currentCity:null,
    selectShow: false,
    animationData: {},
    city_name:"北京",
  },
动画
selectToggle:function () {
    var nowShow = this.data.selectShow;//获取当前option显示的状态
    //创建动画
    var animation = wx.createAnimation({
      timingFunction: "ease"
    })
    this.animation = animation;
    if (nowShow) {
      animation.rotate(0).step();
      this.setData({
        animationData: animation.export()
      })
    } else {
      animation.rotate(180).step();
      this.setData({
        animationData: animation.export()
      })
    }
    this.setData({
      selectShow: !nowShow
    })
    },
      // 点击事件
  setText: function (e) {
    console.log(e)
    var that = this
    var nowData = that.properties.currentCity;//当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
    var nowIdx = e.target.dataset.index;//当前点击的索引
    var city_name = nowData[nowIdx].city_name;//当前点击的内容
    var id = nowData[nowIdx].id;
    //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
    that.animation.rotate(0).step();