微信小程序商品筛选，侧方弹出动画选择页面，在一点点的零碎的时间里面写出来的代码，和前两篇效果结合出来的。点击按钮的同时，要实现这两个功能的叠加。
小程序动画animation向左移动效果：https://www.jianshu.com/p/1cdf36070205 小程序点击按钮出现和隐藏遮罩层：https://www.jianshu.com/p/1193bf63a87d
效果是这样的:
demo是这样的：
wxml
<view class=""> <view class="animation-button" bindtap="translate">筛选</view> <view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}} "> <view class="animation-element" animation="{{animation}}"> <view class='use'> <view class='iconuse'>用途</view> <ul class="useage"> <li bindtap="tryDriver" style="background:{{background}};">全部</li> <li>经济实惠型</li> <li>家用学习型</li> </ul> <ul class="useage"> <li bindtap="tryDriver" style="background:{{background}};">豪华发烧型</li> <li>疯狂游戏型</li> <li>商务办公型</li> </ul> <ul class="useage"> <li>经济实惠型</li> <li>家用学习型</li> </ul> </view> <!-- 价格 --> <view class='use'> <view class='iconprice'>价格</view> <ul class="useage"> <li bindtap="tryDriver" style="background:{{background}};">全部</li> <li>经济实惠型</li> <li>家用学习型</li> </ul> <ul class="useage"> <li bindtap="tryDriver" style="background:{{background}};">豪华发烧型</li> <li>疯狂游戏型</li> <li>商务办公型</li> </ul> <ul class="useage"> <li>经济实惠型</li> <li>家用学习型</li> </ul> </view> <view class='buttom'> <view class="animation-reset" >重置</view> <view class="animation-button" bindtap="success">完成</view> </view> </view> </view> </view>
wxss
.isRuleShow { display: block; } .isRuleHide { display: none; } .float { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 2; top: 0; left: 0; /* margin-top:80rpx; */ } .iconuse { margin-left: 11rpx; } .iconprice { margin-left: 11rpx; } .animation-element { width: 580rpx; height: 1175rpx; background-color: #ffffff; border: 1px solid #f3f0f0; position: absolute; right: -572rpx; } .useage { height: 40rpx; } .useage li { width: 177rpx; margin: 12rpx 7rpx; height: 70rpx; line-height: 70rpx; display: inline-block; text-align: center; border: 1px solid #f3f0f0; border-radius: 15rpx; font-size: 30rpx; } .buttom{ position: fixed; bottom: 0; } .animation-reset{ float: left; line-height: 2; width: 260rpx; margin: 15rpx 12rpx; border: 1px solid #f3f0f0; text-align: center; } .animation-button{ float: left; line-height: 2; width: 260rpx; margin: 15rpx 12rpx; border: 1px solid #f3f0f0; text-align: center; }
js
Page({ onReady: function () { this.animation = wx.createAnimation() }, translate: function () { this.setData({ isRuleTrue: true }) this.animation.translate(-245, 0).step() this.setData({ animation: this.animation.export() }) }, success: function () { this.setData({ isRuleTrue: false }) this.animation.translate(0, 0).step() this.setData({ animation: this.animation.export() }) }, tryDriver: function () { this.setData({ background: "#89dcf8" }) } })
ok完成了，今天再说一点，有人问我关于技术博客日更的事情，一来是参加了简书的日更活动，不想断开，二来是一路走来，能看见自己每天学习到的知识点和解决的问题，所以才会感到很充实，不会觉得自己每天在空空度日。如果你也想坚持一件事情，可以私聊我，我们相互监督，互相帮助，让自己变得更好。
