小程序如何使用solidup和soliddown？

1.首先上图看看，比如点击购物车的显示和隐藏

2.上代码

<!-- 加入的商品列表  --><view class="addBox" wx:if="{{addBox}}" bindtap="hiddenAddBox"><view class='addGoodsList {{aniStyle?"slideup":"slidedown"}}'><view class="titTop"><view class="topLeft"><image catchtap="checkAllBtn" src="{{allChecked ? 'http://pics.jiuziran.com/FuxcLrK9xqVgbhbZPtqknbFW1v5K' : 'http://pics.jiuziran.com/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image><text>全选<text class="whole">（共{{cartProList.length}}件）</text></text></view><view class="topRight" catchtap='clearShopItem'><image src="http://pics.jiuziran.com/FsHjyJscK2cC1N4afhZY6jg4C8PB"></image><text class="wholeTwo">清空购物车</text></view></view><scroll-view scroll-y style="height:{{closeHeight}}px"><view class="containBottom" wx:for="{{cartProList}}" wx:key="index"><image class="wImg" catchtap="checkBtn" data-index="{{index}}" src="{{item.sim_check ? 'http://pics.jiuziran.com/FuxcLrK9xqVgbhbZPtqknbFW1v5K' : 'http://pics.jiuziran.com/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image><view class="goodsBox goodsBoxTwo"><view class="godLst"><image class="gImg" src="{{item.sim_photo}}"></image><view class="goodsList goodsListTwo"><text class="gTitle">{{item.sim_name}}</text><view class="goodsNumber">  <view class="godL"><text class="zpri">¥<text class="pri">{{item.sim_target_price}}</text></text><text class="pri2" wx:if="{{item.sim_source_price}}">¥{{item.sim_source_price}}</text></view><view class="num"><!-- 此处加入购物车需要做数据同步处理 --><image class="numImg1" src="http://pics.jiuziran.com/Fqe7zzfze4RMeby12JlJ7iw4epGP" catchtap='modelChangeCartNum' data-sctnumber="{{item.sct_number}}" data-sim_id="{{item.sim_id}}" data-temp="-1" data-sct_id="{{item.sct_id}}"></image><text>{{item.sct_number}}</text><image class="numImg2" src="http://pics.jiuziran.com/Fvhl1bsFLqYQMFViY2tSNm_5diTk" catchtap='modelChangeCartNum' data-pro_count="{{item.sim_product_count}}" data-sctnumber="{{item.sct_number}}" data-sim_id="{{item.sim_id}}" data-temp="1" data-sct_id="{{item.sct_id}}"data-limit="{{item.sim_favorite_count}}"></image></view></view></view></view></view></view></scroll-view></view></view>

看图，最主要的

3.css 主要代码

在这/*加入的商品列表  */
@keyframes slidedown {from {transform: translateY(0);}to {transform: translateY(100%);}
}
.slidedown {animation: slidedown 0.4s linear ;
}
.slideup {animation: slideup 0.4s linear ;
}
@keyframes slideup {from {transform: translateY(100%);}to {transform: translateY(0);}
}.addBox{width: 100%;height: 100%;position: fixed;top: 0;left:0;background:RGBA(0,0,0,.7);z-index: 3;
}
.addGoodsList{width: 100%;height:  860rpx;position: absolute;bottom: 0;left: 0;  z-index: 50; background: #FFFFFF;margin-bottom: 92rpx;
}

js主要代码

  aniStyle: false,//加入购物车商品addBox: false,
遮罩层按钮hiddenAddBox: function (e) {var that = this;console.log(that.data.aniStyle)this.setData({aniStyle: false})setTimeout(function () {that.setData({addBox: false})}, 400)},购物车按钮// 显示购物车动画addGwc: function () {var that = thisif (that.data.aniStyle==false){that.setData({aniStyle: true,addBox: true,})}else{that.setData({aniStyle: false,})setTimeout(function () {that.setData({addBox: false,})}, 400)}

小程序如何使用solidup和soliddown？相关推荐

[微信官方文档] 小程序-错误码信息与解决方案表
错误码信息与解决方案表错误码是通过binderror回调获取到的错误信息. 代码异常情况理由解决方案 1000 后端错误调用失败该项错误不是开发者的异常情况一般情况下忽略一段时间即可恢复. ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序一键创建js,json,wxml,wxss
在写小程序创建项目的时候每一个一般都会有 js,json wxml ,wxss 一个选择一个一个创建也可以一键创建创建的时候选择Component 输入名字这四个就一下创建了这样创建写的时候j ...
微信小程序界面跳转方法
1 wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到原页面.小程序中页 ...
微信小程序分享注意点
模拟机如下图使用呢,文档上都有如下这个就是小程序分享如果想点击按钮分享也行,需要设置一下属性如下 open-type="share" 文档内容 onShareAppMessa ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释, ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...

小程序如何使用solidup和soliddown？

小程序如何使用solidup和soliddown？相关推荐

最新文章

热门文章