微信小程序商品筛选,侧方弹出动画选择页面

微信小程序商品筛选,侧方弹出动画选择页面,在一点点的零碎的时间里面写出来的代码,和前两篇效果结合出来的。点击按钮的同时,要实现这两个功能的叠加。 
小程序动画animation向左移动效果https://www.jianshu.com/p/1cdf36070205 
小程序点击按钮出现和隐藏遮罩层:https://www.jianshu.com/p/1193bf63a87d

效果是这样的:

demo是这样的:

wxml

  1. <view class="">
  2. "animation-button"bindtap"translate">筛选</view>
  3. >
  4. 'use'>
  5. 用途</view>
  6. <li"tryDriver"style"background:{{}};"全部</li>
  7. 家用学习型</li>
  8. 豪华发烧型</li>
  9. 商务办公型</li>
  10. </ul>
  11. 'iconprice'价格</li>
  12. </ul>
  13. >
  14. "success"完成</view>
  15. </view>

wxss

.isRuleShow {
  • }
  • none;
  • .float {
  • width%;
  • background-color rgba(0,0.5);
  • top;
  • /* margin-top:80rpx; */
  • marginleft11rpx}
  • ;
  • animationelement 580rpx1175rpx background #ffffff;
  • absolute right-572rpx;
  • useage {
  • useage li {
  • lineheight;
  • radius15rpx fontsize30rpx}
  • resetfloat left line260rpx15rpx12rpx#f3f0f0;
  • }
  • js

    Page({
    
  • },
  • isRuleTruetrue
  • translate(-245).step()
  • false
  • ()
  • tryDriver background "#89dcf8"
  • })
  • ok完成了,今天再说一点,有人问我关于技术博客日更的事情,一来是参加了简书的日更活动,不想断开,二来是一路走来,能看见自己每天学习到的知识点和解决的问题,所以才会感到很充实,不会觉得自己每天在空空度日。如果你也想坚持一件事情,可以私聊我,我们相互监督,互相帮助,让自己变得更好。

    原文作者:祈澈姑娘 技术博客https://www.jianshu.com/u/05f416aefbe1 
    90后前端妹子,爱编程,爱运营,爱折腾。 
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

    相关文章

    开发微信小程序的用户授权登录功能
    小程序开发页面如何实现跳转?
    浅谈小程序开发中蓝牙连接错误分析及解决方法
    什么是小程序?它有哪些功能?
    如何配置小程序开发项目结构?(教程)
    怎么把自己的店加入小程序