加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 19:26:45 所属栏目:资源 来源:网络整理
导读:微信小程序商品筛选,侧方弹出动画选择页面,在一点点的零碎的时间里面写出来的代码,和前两篇效果结合出来的。点击按钮的同时,要实现这两个功能的叠加。? 小程序动画animation向左移动效果:https://www.jianshu.com/p/1cdf36070205? 小程序点击按钮出现和

微信小程序商品筛选,侧方弹出动画选择页面,在一点点的零碎的时间里面写出来的代码,和前两篇效果结合出来的。点击按钮的同时,要实现这两个功能的叠加。?
小程序动画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。

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读