微信小程序> 微信小程序商品筛选侧方弹出动画选择页面-所选商城小程序-网上商城小程序

微信小程序商品筛选侧方弹出动画选择页面-所选商城小程序-网上商城小程序

浏览量:1590 时间: 来源:con_knife

1.微信小程序动画原文档地址

2.动画api请求参数

3.timingFunction有效值:

wxss.animation{background:rgba(0,0,0,0.2);/*background:#000;*/z-index:999;float:left;right:-100vh;//动画初始前向右移100vhwidth:100%;height:100%;}.animation-content{width:80%;height:100%;background:#fff;position:absolute;right:0;}wxml代码viewclass='animation'animation="{{animationData}}"style="height:100%;position:fixed;visibility:{{show?'visible':'hidden'}}"viewclass='animation-content'viewclass='pricezone'viewclass='pztitle'text价格区间(元)/text/viewviewclass='inputzone'inputtype='digit'bindinput="bindKeyInput"placeholder="最低价"/textstyle='color:#ddd'-/textinputtype='digit'bindinput="bindKeyInput"placeholder="最高价"//view/view/viewjs代码filter:function(e){//点击筛选事件varanimation=wx.createAnimation({//创建动画duration:1000,timingFunction:'ease',width:300,height:800,top:0,bottom:0,right:0,backgroundColor:'#fff',opcity:0.5})this.animation=animationanimation.translateX(-100+'vh').step()//动画效果向右滑动100vhthis.setData({animationData:animation.export(),show:true})},效果图

4.欢迎加群讨论:群号578385176

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎