您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2018-12-29 10:39:08
  • 来源:  
  • 栏目:解决方案

导语: 微信小程序商品筛选,侧方弹出动画选择页面,在一点点的零碎的时间里面写出来的代码,和前两篇效果结合出来的。点击按钮的同时,要实

 

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

效果是这样的:

17.gif

demo是这样的:

wxml

 
  1. <view class="">
  2. <view class="animation-button" bindtap="translate">筛选</view>
  3. <view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}} ">
  4. <view class="animation-element" animation="{{animation}}">
  5. <view class='use'>
  6. <view class='iconuse'>用途</view>
  7.  
  8. <ul class="useage">
  9. <li bindtap="tryDriver" style="background:{{background}};">全部</li>
  10. <li>经济实惠型</li>
  11. <li>家用学习型</li>
  12. </ul>
  13. <ul class="useage">
  14. <li bindtap="tryDriver" style="background:{{background}};">豪华发烧型</li>
  15. <li>疯狂游戏型</li>
  16. <li>商务办公型</li>
  17. </ul>
  18. <ul class="useage">
  19. <li>经济实惠型</li>
  20. <li>家用学习型</li>
  21. </ul>
  22. </view>
  23.  
  24. <!-- 价格 -->
  25. <view class='use'>
  26. <view class='iconprice'>价格</view>
  27.  
  28. <ul class="useage">
  29. <li bindtap="tryDriver" style="background:{{background}};">全部</li>
  30. <li>经济实惠型</li>
  31. <li>家用学习型</li>
  32. </ul>
  33.  
  34.  
  35. <ul class="useage">
  36. <li bindtap="tryDriver" style="background:{{background}};">豪华发烧型</li>
  37. <li>疯狂游戏型</li>
  38. <li>商务办公型</li>
  39. </ul>
  40.  
  41.  
  42. <ul class="useage">
  43.  
  44. <li>经济实惠型</li>
  45. <li>家用学习型</li>
  46. </ul>
  47.  
  48. </view>
  49.  
  50. <view class='buttom'>
  51. <view class="animation-reset" >重置</view>
  52. <view class="animation-button" bindtap="success">完成</view>
  53. </view>
  54.  
  55.  
  56.  
  57. </view>
  58. </view>
  59.  
  60. </view>

wxss

 
  1. .isRuleShow {
  2. display: block;
  3. }
  4.  
  5. .isRuleHide {
  6. display: none;
  7. }
  8. .float {
  9. height: 100%;
  10. width: 100%;
  11. position: fixed;
  12. background-color: rgba(0, 0, 0, 0.5);
  13. z-index: 2;
  14. top: 0;
  15. left: 0;
  16. /* margin-top:80rpx; */
  17. }
  18.  
  19.  
  20.  
  21.  
  22.  
  23. .iconuse {
  24. margin-left: 11rpx;
  25. }
  26.  
  27. .iconprice {
  28. margin-left: 11rpx;
  29. }
  30.  
  31. .animation-element {
  32. width: 580rpx;
  33. height: 1175rpx;
  34. background-color: #ffffff;
  35. border: 1px solid #f3f0f0;
  36. position: absolute;
  37. right: -572rpx;
  38. }
  39.  
  40.  
  41.  
  42. .useage {
  43. height: 40rpx;
  44. }
  45.  
  46. .useage li {
  47. width: 177rpx;
  48. margin: 12rpx 7rpx;
  49. height: 70rpx;
  50. line-height: 70rpx;
  51. display: inline-block;
  52. text-align: center;
  53. border: 1px solid #f3f0f0;
  54. border-radius: 15rpx;
  55. font-size: 30rpx;
  56. }
  57.  
  58. .buttom{
  59. position: fixed;
  60. bottom: 0;
  61. }
  62. .animation-reset{
  63. float: left;
  64. line-height: 2;
  65. width: 260rpx;
  66. margin: 15rpx 12rpx;
  67. border: 1px solid #f3f0f0;
  68. text-align: center;
  69. }
  70. .animation-button{
  71. float: left;
  72. line-height: 2;
  73. width: 260rpx;
  74. margin: 15rpx 12rpx;
  75. border: 1px solid #f3f0f0;
  76. text-align: center;
  77. }

js

 
  1. Page({
  2. onReady: function () {
  3. this.animation = wx.createAnimation()
  4. },
  5. translate: function () {
  6. this.setData({
  7. isRuleTrue: true
  8. })
  9. this.animation.translate(-245, 0).step()
  10. this.setData({ animation: this.animation.export() })
  11. },
  12.  
  13. success: function () {
  14. this.setData({
  15. isRuleTrue: false
  16. })
  17. this.animation.translate(0, 0).step()
  18. this.setData({ animation: this.animation.export() })
  19. },
  20. tryDriver: function () {
  21. this.setData({
  22. background: "#89dcf8"
  23. })
  24. }
  25. })

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

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部