小程序模板網(wǎng)

微信小程序商品篩選，側(cè)方彈出動(dòng)畫選擇頁面

發(fā)布時(shí)間：2019-01-02 08:43 所屬欄目：小程序開發(fā)教程
 
微信小程序商品篩選，側(cè)方彈出動(dòng)畫選擇頁面，在一點(diǎn)點(diǎn)的零碎的時(shí)間里面寫出來的代碼，和前兩篇效果結(jié)合出來的。點(diǎn)擊按鈕的同時(shí)，要實(shí)現(xiàn)這兩個(gè)功能的疊加。 
 
 
效果是這樣的:
 
 
 
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>經(jīng)濟(jì)實(shí)惠型</li>
          <li>家用學(xué)習(xí)型</li>
        </ul>
        <ul class="useage">
          <li bindtap="tryDriver" style="background:{{background}};">豪華發(fā)燒型</li>
          <li>瘋狂游戲型</li>
          <li>商務(wù)辦公型</li>
        </ul>
        <ul class="useage">
          <li>經(jīng)濟(jì)實(shí)惠型</li>
          <li>家用學(xué)習(xí)型</li>
        </ul>
      </view>
      <!-- 價(jià)格 -->
      <view class='use'>
        <view class='iconprice'>價(jià)格</view>
        <ul class="useage">
          <li bindtap="tryDriver" style="background:{{background}};">全部</li>
          <li>經(jīng)濟(jì)實(shí)惠型</li>
          <li>家用學(xué)習(xí)型</li>
        </ul>
        <ul class="useage">
          <li bindtap="tryDriver" style="background:{{background}};">豪華發(fā)燒型</li>
          <li>瘋狂游戲型</li>
          <li>商務(wù)辦公型</li>
        </ul>
        <ul class="useage">
          <li>經(jīng)濟(jì)實(shí)惠型</li>
          <li>家用學(xué)習(xí)型</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完成了，今天再說一點(diǎn)，有人問我關(guān)于技術(shù)博客日更的事情，一來是參加了簡書的日更活動(dòng)，不想斷開，二來是一路走來，能看見自己每天學(xué)習(xí)到的知識點(diǎn)和解決的問題，所以才會感到很充實(shí)，不會覺得自己每天在空空度日。如果你也想堅(jiān)持一件事情，可以私聊我，我們相互監(jiān)督，互相幫助，讓自己變得更好。


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/25058.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢