taro 侧边滑动效果

效果图

1.定义数据

  constructor (props) {
    super(props);
    this.state = {
        showModalStatus :true,
        lowArea: "",
        highArea: "",
        highPrice: "",
        lowPrice: "",
        talkServiceCon: [  // 谈客服务条件选项
            {id: 1,name: '平台',value: 4,isActive: false},
            {id: 1,name: '开发商',value: 2,isActive: false},
            {id: 1,name: '代理商',value: 3,isActive: false}
          ],
          proConuntsCon: [  // 结账周期条件选项
            { id: 3, name: '垫佣', value: -1, isActive: false },
            { id: 3, name: '3天', value: 0, isActive: false },
            { id: 3, name: '7天', value: 1, isActive: false },
            { id: 3, name: '15天', value: 2, isActive: false },
            { id: 3, name: '30天', value: 3, isActive: false },
            { id: 3, name: '60天', value: 4, isActive: false },
            { id: 3, name: '90天', value: 5, isActive: false },
          ],
          proAreaCon: [],  // 项目区域条件选项
          navHeight:null ,//导航栏高度
          dianYong: "",
          priorityTypeItem: "",
          talkItem: "",
          arrItem: "",
          cycleItem: "",
    }
  }

2.获取导航栏高度，让顶部填充

  componentDidMount(){
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();//获取胶囊
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
          // navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
          navHeight = statusBarHeight + menuButtonObject.height-5 //为了让筛选上移5像素减5
          this.setState({
            navHeight:navHeight
          })
        // this.globalData.navHeight = navHeight;
        // this.globalData.navTop = navTop;
        // this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
    let list = chooseCity()
    this.setState({
      proAreaCon: list
    });
  }

3.添加事件

 // 筛选条件点击事件，根据点击按钮，效果切换
  proTypeOnClick = (type, index) => {
    let list = [];
    switch (type) {    //进行按按钮筛选
      case 'proConuntsCon':
        list = [...this.state.proConuntsCon];
        break;
      case 'talkServiceCon':
        list = [...this.state.talkServiceCon];
        break;
      case 'proAreaCon':
        list = [...this.state.proAreaCon];
        break;
      default:
        break;
    }
    //进行遍历，改变状态值
    list.map((val, i) => {
      if (index === i) {
        val.isActive = true;
      } else {
        val.isActive = false;
      }
    }) 
    //重新赋值
    this.setState({ [type]: list });
  }

切换效果图

确认选择条件

  // 确认选择条件
  doSelectConditions = () => {
    let talkServiceCon = [...this.state.talkServiceCon];
    let proAreaCon = [...this.state.proAreaCon];
    let proConuntsCon = [...this.state.proConuntsCon];
    
    let ts = talkServiceCon.filter(val => {
      return val.isActive === true;
    });
    let proArea = proAreaCon.filter(val => {
      return val.isActive === true;
    });
    let proConunts = proConuntsCon.filter(val => {
      return val.isActive === true;
    });
    let priorityTypeItem
    let talkItem
    let arrItem
    let cycleItem
    let dianYong
    if (ts.length == 0) {
      talkItem = ''
    } else {
      talkItem = ts[0].value
    }
    if (proArea.length == 0) {
      arrItem = ''
    } else {
      if(proArea[0].id == "000"){ //区域为不的时候，将区域置为空
        arrItem = ""
      }else{
        arrItem = proArea[0].name
      }
    }
    if (proConunts.length == 0) {
      cycleItem = ''
    } else {
      if (proConunts[0].value == -1) {
        dianYong = 1
      } else {
        cycleItem = proConunts[0].value
      }
    }

    let obj ={}
    obj.dianYong = dianYong
    obj.talkItem = talkItem
    obj.arrItem = arrItem
    obj.cycleItem = cycleItem
    obj.lowArea = this.state.lowArea
    obj.highArea = this.state.highArea
    obj.highPrice = this.state.highPrice
    obj.lowPrice = this.state.lowPrice
    console.log(obj)
    this.props.onSureSelect(obj)
 
  }

面积输入框事件

    // input onchange事件
    onInputChange = (type, event) => {
      this.setState({ [type]: event.target.value });
    }

重置事件

    // 重置条件，但房产类型必须选，初始值为页面跳过来的type
    resetConditions = () => {
        let talkServiceCon = [...this.state.talkServiceCon];
        let proAreaCon = [...this.state.proAreaCon];
        let proConuntsCon = [...this.state.proConuntsCon];
        talkServiceCon.map(val => {
          val.isActive = false;
        });
        proAreaCon.map(val => {
          val.isActive = false;
        });
        proConuntsCon.map(val => {
          val.isActive = false;
        });
        this.setState({
          condition: this.state.oldCondition,
          talkServiceCon,
          proAreaCon,
          proConuntsCon,
          dianYong: '',
          lowArea: "",
          highArea: "",
          highPrice: "",
          lowPrice: "",
        });
      }

页面内容

    return (
        <View>
        {
            this.props.isDrawer?
            <View animation={this.props.animationData} className="drawer_screen"  catchtouchmove="true">
              <View className="close" onClick = {this.props.onSetModalStatus} data-status="0"></View>
              <View className="drawer_attr_box">
                {/* <View className="drawer-content"> */}
                <View className="top-block" style={"height:" + navHeight + "px"}></View>
                  <ScrollView scroll-y='true' style={"height:calc(100% - " + navHeight + "rpx - 180rpx)"} className="drawer_attr_content">
                    <View className="choose-list">
                      <View className="more-list">
                        <View className="list-title-name">区域</View>
                        <View className="list-content">
                          {
                            proAreaCon.map((val, i) =>
                              <View
                                className={val.isActive ? 'item-active' : ''}
                                onClick={this.proTypeOnClick.bind(this, "proAreaCon", i)}
                                key={i}
                              >{val.name}</View>
                            )
                          }
                        </View>
                      </View>
                      <View className="more-list">
                        <View className="list-title-name">均价区间(单位:元/m²)</View>
                        <View className="input-wrap">
                          <Input onInput={this.onInputChange.bind(this, 'lowPrice')} value={lowPrice} placeholder='最低价格' />
                          <View className="black-line"></View>
                          <Input onInput={this.onInputChange.bind(this, 'highPrice')} value={highPrice} placeholder='最高价格' />
                        </View>
                      </View>
                      <View className="more-list">
                        <View className="list-title-name">面积区间(单位:㎡)</View>
                        <View className="input-wrap">
                          <Input onInput={this.onInputChange.bind(this, 'lowArea')} value={lowArea} placeholder='最小面积' />
                          <View className="black-line"></View>
                          <Input onInput={this.onInputChange.bind(this, 'highArea')} value={highArea} placeholder='最大面积' />
                        </View>
                      </View>

                    </View>
                    <View className="choose-list">
                      <View className="more-list">
                          <View className="list-title-name">谈客服务</View>
                          <View className="list-content">
                            {
                              talkServiceCon.map((val, i) =>
                                <View
                                  className={val.isActive ? 'item-active' : ''}
                                  onClick={this.proTypeOnClick.bind(this, "talkServiceCon", i)}
                                  key={i}
                                >{val.name}</View>
                              )
                            }
                          </View>
                        </View>
                        <View className="more-list">
                        <View className="list-title-name">结账周期</View>
                        <View className="list-content">
                          {
                            proConuntsCon.map((val, i) =>
                              <View
                                className={val.isActive ? 'item-active' : ''}
                                onClick={this.proTypeOnClick.bind(this, "proConuntsCon", i)}
                                key={i}
                              >{val.name}</View>
                            )
                          }
                        </View>
                      </View>
                    </View>
               </ScrollView>
               <View className="btn-list">
                 <View onClick={this.resetConditions} className="reset">重置</View>
                 <View onClick={this.doSelectConditions} className="sure">确定</View>
               {/* </View> */}
                </View>
  

             </View>
            </View>
            :null
        }
        </View>
    )
  }

less

.drawer_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 1000;
    .close{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1002;
    }
    .drawer_attr_box {
        border-top-left-radius: 20px;
        border-bottom-left-radius:20px ;
        overflow: hidden;
        width: 574px;
        height: 100%;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 2000;
        font-size: 24px;
        background: #F8F8F8;
        .top-block{
          width: 100%;
          height: 80px;
          background: #fff;
        }
        .drawer_attr_content {
            z-index: 2200;
            height: 100%;
          }
      }
  }
  .drawer-content{
    position: relative;
    width: 100%;
    height: 100%;
  }

.choose-list{
  padding-top: 20px;
  padding-left: 35px;
  padding-bottom: 0;
  padding-right: 20px;
  background: #fff;
  margin-top: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius:20px ;
  &:first-child{
    margin-top: 0;
  }
}
.more-list{
  width: 100%;
}
.more-list{
    .list-content{
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      View{
        font-size: 24px;
        width: 21%;
        margin-right: 27px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 5px;
        line-height: 55px;
        color: #000000;
        background: #F8F8F8;
        &:nth-child(4n){
          margin-right: 0;
        }
      }
      .item-active{
        background: #238FAE;
        color: #fff;
      }
    }
      .list-title-name{
          font-size: 24px;
          color: #999;
          width: 100%;
          margin:0 0 20px 0;
      }
      .input-wrap{
        padding-bottom: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        Input{
          padding: 5px 0;
          width: calc((100% - 45px)/2);
          line-height: 44px;
          background: #F8F8F8;
          color: #000;
          text-align: center;
          font-size: 24px;
        }
        .black-line{
          width:25px;
          height:2px;
          background: #000;
        }
      }
  }

.btn-list{
  width: 100%;
  // position: absolute;
  // bottom: 0;
  // left: 0;
  background: #fff;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  View{
      width: 45%;
      text-align: center;
      line-height: 70px;
      border-radius: 10px;
  }
  .reset{
      margin-right: 20px;
      border: 1px solid #238FAE;
      color: #238FAE;
      // background: #e0e0e0;
      // color: #333333;
  }
  .sure{
      background:#238FAE;
      color:#fff;
  }
}

使用

1.引入

import Drawer from "../../compontens/drawer/dirawer"
定义   this.state = {isDrawer:false,} //控制弹框出现，消失

2.使用

 <Drawer onSureSelect={this.sureSelect} 
 onSetModalStatus={this.setModalStatus} 
 isDrawer = {isDrawer} animationData={animationData}/>

3.绑定动画

  setModalStatus(e){
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateX(300).step()
    this.setState({
      animationData: animation.export()
    })
    if (e.currentTarget.dataset.status == 1) {
      this.setState(
        {
          isDrawer:true,
        }
      );
    }
    setTimeout(function () {
      animation.translateX(0).step()
      this.setState({
        animationData: animation
      })
      if (e.currentTarget.dataset.status == 0) {
        this.setState(
          {
            isDrawer: false,
          }
        );
      }
    }.bind(this), 200)
  }

4.确定选择

  sureSelect(data){//将子组件的值传递到父组件函数
    // console.log(data)
    this.setState({
      dianYong:data.dianYong,
      talkItem:data.talkItem,
      arrItem:data.arrItem,
      cycleItem:data.cycleItem,
      lowArea:data.lowArea,
      highArea:data.highArea,
      highPrice:data.highPrice,
      lowPrice:data.lowPrice,
      current: 1,
      projectList: [],
      isDrawer:false
    },()=>{
    //进行自己的业务逻辑
      this.getProInfoList()
    })
  }