• 微信小程序 类似弹出菜单特效,从右向左滑出


    想要实现的效果:点击圆形图标,view从右向左滑出,再次点击从左向右滑入

    wxml:

      <view class="goods_btn {{s_move==false?'z_move':''}}" catchtap='show_move'>
        <image src='../../images/goods_btn.png' style='28rpx;height:28rpx;'></image>
      </view> 
      <view class="move_box {{s_move==false?'move_t':''}} {{s_move==true&move_o==1?'move_tf':''}}">
        <view class='m_line'></view>
        <view class='m_title'>校区</view>
        <view class='m_school' style='margin-bottom:12rpx;'>
          <block wx:for="{{school_object}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='m_school'>
          <block wx:for="{{school_object2}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='m_title'>舞种</view>
        <view class='m_school'>
          <block wx:for="{{dance_object}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='m_title'>年龄</view>
        <view class='m_school'>
          <block wx:for="{{age_object}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='m_title'>课程</view>
        <view class='m_course'>
          <block wx:for="{{course_object}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='m_title'>难度</view>
        <view class='m_course'>
          <block wx:for="{{difficult_object}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='m_title'>价格</view>
        <view class='m_school'>
          <block wx:for="{{price_object}}" wx:key="{{index}}">
          <view>{{item}}</view>
          </block>
        </view>
        <view class='default_b'>
          <view class='default_box'></view>
          <view>设为默认选</view>
        </view>
        <view class='sure_b'>
          <view catchtap='show_move'>确定</view>
          <view catchtap='show_move'>取消</view>
        </view>
      </view>

    js:

    data: {
        move_o:0,
        s_move:true
    },
    show_move:function(){
        let s_move=this.data.s_move;
        this.setData({
          s_move:!s_move,
          move_o:1
        })

    wxss:

    .move_t{
      z-index: 22; 
      animation: mymove 1s 1;
      animation-fill-mode:forwards; 
    }
    .z_move{
      z-index: 23!important;
    }
    @keyframes mymove{
      from {right:-750px;}
      to {right:0px;}
    }
    .move_tf{
      z-index: 22;
      animation: mymove2 1s 1;
      animation-fill-mode:forwards; 
    }
    @keyframes mymove2{
      from {right:0px;}
      to {right:-750px;}
    }
  • 相关阅读:
    JavaScript中创建对象的几种模式
    Vue学习5:条件渲染
    Vue学习4:class与style绑定
    Vue学习3:计算属性computed与监听器
    Vue学习2:模板语法
    普通递归与优化递归
    new操作符具体干了什么呢?
    各种形式存放token
    用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数
    ES6 对象的解构赋值
  • 原文地址:https://www.cnblogs.com/jvziking/p/8462754.html
Copyright © 2020-2023  润新知