微信小程序商品篩選，側方彈出動畫選擇頁面
發布時間：2019-01-02 08:43 所屬欄目：小程序開發教程
微信小程序商品篩選，側方彈出動畫選擇頁面，在一點點的零碎的時間里面寫出來的代碼，和前兩篇效果結合出來的。點擊按鈕的同時，要實現這兩個功能的疊加。
效果是這樣的:
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完成了，今天再說一點，有人問我關于技術博客日更的事情，一來是參加了簡書的日更活動，不想斷開，二來是一路走來，能看見自己每天學習到的知識點和解決的問題，所以才會感到很充實，不會覺得自己每天在空空度日。如果你也想堅持一件事情，可以私聊我，我們相互監督，互相幫助，讓自己變得更好。
