微信小程序侧滑效果实现

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

先看效果图：

源码：

<view wx:if='{{if_show}}' class='{{show_centent?"show":"hide"}}' />
<button bindtap='btn'>展示 or 隐藏</button>

page{height: 100%
}
.show {position: fixed;width: 70%;height: 100%;animation: myfirst_show 2s;background: chartreuse;
}
@keyframes myfirst_show
{
0% {left:-70%;}
100% {left: 0px;}
}
.hide{position: fixed;width: 70%;height: 100%;animation: myfirst_hide 2s;background: chartreuse;
}
@keyframes myfirst_hide
{
0% {left:0;}
100% {left: -70%;}
}

Page({data: {show_centent:false,if_show:false},btn: function () {var that =this;if (!this.data.show_centent) {this.setData({if_show: true,show_centent: true})} else {that.setData({show_centent: false})setTimeout(function () {that.setData({if_show: false})},2000)}}
})

微信小程序侧滑效果实现相关推荐

python日历小程序_微信小程序日历效果
本文实例为大家分享了微信小程序日历效果的具体代码,供大家参考,具体内容如下源码下载地址项目需要一个日历功能,花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文 ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
酷炫微信小程序点赞效果，带震动
微信小程序酷炫点赞效果,带震动 wxml文件 <view class="action cf love-new" bindtap="clickHandler" ...
窗帘效果图css,vuejs、微信小程序窗帘效果
说明本程序分为vuejs和微信小程序部分,主要不同会在下面标志出来代码只是测试用,有不好的地方请见谅实现思路实现思路其实很简单,就是根据获取的宽度值修改div层的宽度效果图 vuejs部分 ...
微信小程序各类效果(视频)
常用微信小程序功能API: 扫码.蓝牙.nfc.支付等小程序商城小程序 GPS定位设备实时数据查看汇报小程序汽车蓝牙遥控小程序物联设备扫码操作.充值.多端用户登录小程序扫码绑定.充 ...
微信小程序动画效果方法封装
微信小程序的动画如何实现?归纳起来主要有以下几步: 首先在wxml中为需要添加动画的元素绑定动画属性,如下所示: <image animation="{{animationData}} ...
微信小程序显示loading效果，微信小程序节流效果，微信小程序生命周期，微信小程序组件的创建与使用
一.显示loading效果文档地址:wx.showLoading(Object object) | 微信开放文档请求前显示loading 效果,请求结束后隐藏loading // 在请求模块中 ...
微信小程序幻灯片效果实现
视图容器swiper index.wxml <view class="container"> <view clas ...
微信小程序 --- 日历效果
效果预览: wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'><view class='dateBox'>{ ...

微信小程序侧滑效果实现

承接微信小程序开发。扫码加微信。

正文：

微信小程序侧滑效果实现相关推荐

最新文章

热门文章

微信小程序 侧滑效果实现

承接微信小程序开发。扫码加微信。

正文：

微信小程序 侧滑效果实现相关推荐

最新文章

热门文章

微信小程序侧滑效果实现

微信小程序侧滑效果实现相关推荐