uniapp制作微信小程序动画效果

业务需求：
点击右侧橙色背景 ‘身份切换’圆形后，显示弹框，同时橙色圆形1s钟侧滑显示

选择身份后弹窗消失，同时橙色圆形回到原位

<!-- 切换身份圆圈 -->
<view class="changeIdentities" :class="{ active : active }" @tap="showChangeIdentitiesBox"><view class="">身份</view><view class="">切换</view>
</view>

<!-- 身份切换选框 -->
<view class="cu-modal" :class="{ show: active }" @tap="hideModal"><view class="cu-dialog" @tap.stop style="background: none;width: auto;"><view class="changeIdentitiesBox"><view class="title">身份切换</view><view class="content"><view class="service" @tap="changeIdentities('服务商')"><image class="identitiesImg" src="http://10.100.0.120/temp/imgs/serviceIdentities.png" mode=""></image><view class="identitiesText">服务商</view></view><view class="customer" @tap="changeIdentities('消费者')"><image class="identitiesImg" src="http://10.100.0.120/temp/imgs/customerIdentities.png" mode=""></image><view class="identitiesText">消费者</view></view></view></view></view>
</view>

.changeIdentities {position: fixed;z-index: 400;right: -55rpx;bottom: 370rpx;width: 110rpx;height: 110rpx;line-height: 55rpx;color: rgba(255, 255, 255, 1);background-color: rgba(255, 141, 26, 1);border-radius: 50%;font-size: 30rpx;text-align: center;transition: all 1s linear;
}.active {transform: translateX(-55rpx);
}

.changeIdentitiesBox {width: 520rpx;height: 372rpx;background-color: white;.title {padding: 16rpx 0;text-align: center;color: rgba(0, 0, 0, 1);font-size: 34rpx;font-weight: bold;border-bottom: 2rpx solid rgba(229, 229, 229, 1);}.content {display: flex;padding: 34rpx 0;.service {flex: 1;}.customer {flex: 1;}.identitiesImg {width: 160rpx;height: 160rpx;}.identitiesText {margin-top: 20rpx;color: rgba(80, 80, 80, 1);font-size: 32rpx;font-weight: bold;}}
}

// 切换身份 服务商 <-> 消费者
showChangeIdentitiesBox() {this.active = !this.active;
},

changeIdentities(identities) {this.identities = identities;this.getServiceOrderNav();this.getServiceOrder();this.active = false;
},
//点击蒙层关闭
hideModal() {this.active = false;
},

uniapp制作微信小程序动画效果相关推荐

微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序动画效果方法封装
微信小程序的动画如何实现?归纳起来主要有以下几步: 首先在wxml中为需要添加动画的元素绑定动画属性,如下所示: <image animation="{{animationData}} ...
微信小程序动画效果CSS---有效果图
效果图如下所示不懂得可以看注释都有说明主要就是理解怎么用你会用出什么效果 .wxml <view class="scroll"></view> &l ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
uniapp 实现微信小程序全局分享及自定义分享按钮样式
uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的全局混入概念. 下面直接上实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文 ...
公司企业如何制作微信小程序店铺？
微信小程序除了可以为公司企业充当展示官网之外,有些主打线上销售商品的公司企业也会借助小程序来卖货,那就是我们常说的微信小程序店铺.那么公司企业如何制作微信小程序店铺?下面给大家做个讲解. 一.注册小 ...
HBuilderX用uni-app做微信小程序授权登录
首先,先找到HBuilderX的官网下载软件安装包进行安装. 链接:https://uniapp.dcloud.io/quickstart 然后根据你电脑的配置下载相对应的版本即可. 下载完成后,就是 ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
微信怎么制作小程序？制作微信小程序流程
现在即使小程序已经非常普及了,依然也是有很多人加入到小程序的大队伍中,纷纷制作自己的微信小程序.那么微信怎么制作小程序?制作微信小程序流程又是什么呢?今天就带大家一起来看看. 微信怎么制作小程序?制作 ...

uniapp制作微信小程序动画效果

uniapp制作微信小程序动画效果相关推荐

最新文章

热门文章