当前位置：首页 > 编程日记 > 正文

快捷导航动画制作

编程日记 2024-08-06 06:50:00

做了一个仿大众点评的快捷导航动画效果，点击导航内的箭头，导航缩放，点击快捷导航再伸展。

看效果图：

实现代码：

<block wx:if="{{!isCustom}}"><view class="home_and_reSource" animation="{{animationData}}"><block wx:if="{{!isMin}}"><view><image mode="widthFix" class="image" src="/images/homeIcon.png"></image><view class="txt">首页</view></view><button open-type="launchApp" app-parameter="{{toAppWechat}}" binderror="launchAppError" class="openAppBtn" bindlaunchapp="bindlaunchSuccess"><image mode="widthFix" class="image" src="/images/logoIcon.png"></image><view class="txt">去APP</view></button><view class="xxx"></view><image mode="widthFix" catchtap="slide" class="arrow" src="/images/arrow.png"></image></block><block wx:if="{{isMin}}"><view catchtap="isMax" style="margin-top:10rpx;"><view class="title">快捷</view><view class="title">导航</view></view></block></view>
</block>

function init() {var that = this;that.isMax =()=>{var animation = wx.createAnimation({});animation.height(170).step({duration: 500})that.setData({animationData: animation.export(),})setTimeout(() => {that.setData({isMin: false})}, 600)},that.slide = () => {var animation = wx.createAnimation({});animation.height(40).step({duration: 500})that.setData({animationData: animation.export(),isMin: true})setTimeout(() => {that.setData({isMin: true})},600)},// 打开失败that.launchAppError = function (e) {console.log('打开APP失败0')that.setData({isShowServiceAlert: true,tip: '打开app失败'})that.launchAppCallback(e)},// 成功回调that.bindlaunchSuccess = function (e) {console.log('打开App成功', e);that.setData({isShowServiceAlert: false,tip: '打开app成功'})that.launchAppCallback(e);},that.closeBtn = function () {that.setData({isShowServiceAlert: false})}
}
module.exports = {init: init
}

css


.home_and_reSource{-moz-box-shadow:2px 2px 8px #A1A1A1; -webkit-box-shadow:2px 2px 8px #A1A1A1; box-shadow:2px 2px 8px #A1A1A1;height: 170px;width: 80rpx;border-radius: 50rpx;position: fixed;right: 40rpx;bottom: 300rpx;text-align: center;
}
.home_and_reSource .image{width: 40rpx;height: 40rpx;margin-top: 34rpx;
}
.title{font-size: 22rpx;
}
.home_and_reSource .txt{font-size: 22rpx;
}.xxx{width: 70%;margin-left: 15%;height: 1px;background: #d0d0d0;margin-top: 34rpx;
}
.arrow{width: 20rpx;max-height: 50rpx;margin-top: 26rpx;margin-bottom: 16rpx;transform:rotate(-90deg);
}.openAppBtn{background: none;max-width: 80rpx;margin:0;font-weight: 100;padding:0;line-height: 1.5;
}
.openAppBtn::after{border: none;
}
.iconImage{width: 60rpx;height: 60rpx;
}
.iconBottomTxt{font-size: 24rpx;
}.alert_guide{position: absolute;top: 0;width: 100%;min-height: 100vh;
}
.alert_guide .bg{position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 995;background: rgba(0,0,0,.5);
}
.alert_guide .alert_con{width: 500rpx;height: 740rpx;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 999;
}
.alert_con image{width: 500rpx;height: 740rpx;
}
.alert_con .service{width: 80%!important;position: absolute;left: 50%;transform: translate(-50%);bottom: 0;background: transparent;/* background-image: linear-gradient(to right,#ef8328,#f7c254); */border-radius: 50rpx;color: #efefef;margin:0 auto;padding:14rpx 0;
}
.close_btn{position: absolute;right: 0;top: 0;width: 50rpx;height: 50rpx;line-height: 50rpx;text-align: center;color: #f1a53b;
}

https://www.dkcj.cn/info/13037.html

instant apps_Android Instant Apps 101：它们是什么以及它们如何工作

instant appsby Tomislav Smrečki通过TomislavSmrečki Android Instant Apps are a cool new way to consume native apps without prior installation. Only parts of the app are downloaded and launched, giving the users a native look and feel in a couple of secon…

编程日记2024/08/06 06:40:00

数据库分享一： MySQL的Innodb缓存相关优化

无论是对于哪一种数据库来说，缓存技术都是提高数据库性能的关键技术，物理磁盘的访问速度永远都会与内存的访问速度永远都不是一个数量级的。通过缓存技术无论是在读还是写方面都可以大大提高数据库整体性能。Innodb_buffer_pool_size 的合理设置Innodb…

编程日记2024/08/06 06:30:00

用过美德乐吸奶器的宝妈们感觉比国产吸奶器怎么样啊？

药效好不好，看疗效就知道。吸奶器好不好看评价就知道。我们来看看美德乐吸奶器天猫旗舰店 : http://medela.wang 的宝妈们的评价如可拔奶神器，绝对好过贝亲！最初一次七八十，后来一百多，现在可以翻个倍。结合宝宝吮吸…

编程日记2024/08/06 06:20:00

小程序地图多个 circles 使用demo

效果图： 代码： var that; const app getApp() const util require("../../utils/util.js") const data require("../../utils/map.js") Page({data: {pageShow: false,scale: 15,obj: {},longitude: 116.34665554470486,latitud…

编程日记2024/08/06 06:10:00

编写文档_如何通过编写优质文档来使自己的未来快乐

编写文档by Gabriele Cimato加布里埃莱西马托(Gabriele Cimato) 如何通过编写优质文档来使自己的未来快乐 (How to make your future self happy by writing good docs) 或者，在清除旧代码库时如何减少痛苦 (Or how to be less miserable when dusting off an old …

编程日记2024/08/06 06:00:00

（转载）人人都会OSGI--实例讲解OSGI开发

http://longdick.iteye.com/blog/457310转载于:https://www.cnblogs.com/eecs2016/articles/7422310.html

编程日记2024/08/06 05:50:00

小程序json字符串转 json对象 { name :你好} 转成 { name :你好}

解决后端接口返回 var obj "{ name :"你好"}" 类似这样的数据，对象或者数组外面包了一层引号， 把这种数据转成 var obj { name :"你好"}； 直接上代码： // pages/test/test.js Page({jsonStrToJ…

编程日记2024/08/06 05:40:00

每天写的叫工作日志，每周写的总结叫周报，每月写的叫月报

有些时候，老板会突发让您求每天都要写工作周报，什么项目什么任务，完成情况，完成花费的时间等，然后汇总部门周报；也不是写不出，只是不知道有时候重复做一个项目，到底每天有什么好写&a…

编程日记2024/08/06 05:30:00

为什么分散刷新没有死时间_分散项目为何失败（以及如何处理）

为什么分散刷新没有死时间The most exciting thing about working in the decentralized economy is the fact that no one has any idea as to where it’ll all end up!在去中心decentralized economy工作最令人振奋的事情是，没有人知道最终的结果！ T…

编程日记2024/08/06 05:20:00

.NET Core 常用加密和Hash工具NETCore.Encrypt

前言在日常开发过程中，不可避免的涉及到数据加密解密（Hash）操作，所以就有想法开发通用工具，NETCore.Encrypt就诞生了。目前NETCore.Encrypt只支持.NET Core ,工具包含了AES,DES,RSA加密解密，MD5&#xff0…

编程日记2024/08/06 05:10:00

url 通配符解析成参数

需求：url 参数是通配符，需要把通配符解析成参数并且拼接到 url 中例如：https://xxx.cn/index.html$a1$b2; 解析成 https://xxx.cn/index.html?a1&b2; 时间关系，直接上代码，有时间再补上注释下面是小程序页…

编程日记2024/08/06 05:00:00

性能测试分享：系统架构

性能测试分享：系统架构转载于:https://www.cnblogs.com/poptest/p/4904584.html

编程日记2024/08/06 04:50:00

graphql是什么_为什么GraphQL是避免技术债务的关键

graphql是什么GraphQL (not to be confused with GraphDB or Open Graph or even an actual graph) is a remarkably creative solution to a relatively common problem: How do you enable front end developers to access backend data in exactly the way they need it?Gr…

编程日记2024/08/06 04:40:00

JS如何判断json是否为空

1、判断json是否为空 jQuery.isEmptyObject()； 2、遍历json function getHsonLength(json{var jsonLength0;for (var i in json){jsonLength;}return jsonLength;}转载于:https://www.cnblogs.com/donaldworld/p/7423811.html

编程日记2024/08/06 04:30:00

微软算法100题11 求二叉树中两节点之间的最大距离

第11 题求二叉树中节点的最大距离...如果我们把二叉树看成一个图，父子节点之间的连线看成是双向的，我们姑且定义"距离"为两节点之间边的个数。写一个程序，求一棵二叉树中相距最远的两个节点之间的距离思路: 一棵树中节点的最大距…

编程日记2024/08/06 04:20:00

小程序订阅消息订阅消息开发

微信小程序交流QQ群： 173683895 173683866 526474645 。群内打广告或者脏话一律飞机票订阅消息当用户勾选了订阅面板中的“总是保持以上选择，不再询问”时，模板消息会被添加到用户的小程序设置页，通过 wx.getSetting…

编程日记2024/08/06 04:10:00

meetup_如何使用标准库和Node.js构建Meetup Slack机器人

meetupby Janeth Ledezma简妮丝莱德兹玛(Janeth Ledezma) 如何使用标准库和Node.js构建Meetup Slack机器人 (How to build a Meetup Slack bot with Standard Library and Node.js) In this guide, you will learn how to set up a Slack application that will display infor…

编程日记2024/08/06 04:00:00

.NET使用OpenSSL生成的pem密钥文件[1024位]

using System; using System.Text; using System.Security.Cryptography; using System.Web; using System.IO;namespace Thinhunan.Cnblogs.Com.RSAUtility {public class PemConverter{/// <summary>/// 将pem格式公钥转换为RSAParameters/// </summary>/// <…

编程日记2024/08/06 03:50:00

[2014百度之星资格赛]

第一个问题： Energy Conversion Problem Description魔法师百小度也有遇到难题的时候——如今。百小度正在一个古老的石门面前，石门上有一段古老的魔法文字，读懂这样的魔法文字须要耗费大量的能量和大量的脑力。过了许久。百小度最终读懂魔法…

编程日记2024/08/06 03:40:00

视频录制，压缩实现源码

实现代码： <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><meta name"viewport" content"widthdevice-width, initial-scale1.0"><!-- <script src"./js…

编程日记2024/08/06 03:30:00

alexa技能个数_如何在您的技能中使用Alexa演示语言

alexa技能个数by Garrett Vargas通过Garrett Vargas 如何在您的技能中使用Alexa演示语言 (How to use Alexa Presentation Language in your skill) Amazon recently released the Alexa Presentation Language (APL). APL provides a richer display for multimodal skills. …

编程日记2024/08/06 03:20:00

HTML与XML总结

阅览《孙欣HTML》和《刘炜XML》过了一段时间，在这里学到的内容用思维导图来概括。HTML与XML都是标记语言。同样点： HTML文档与XML文档有类似的结构。前者是（head和body）后者是（声明和主体），大致…

编程日记2024/08/06 03:10:00

ant PageHeaderWrapper 返回上一页

PageHeaderWrapper 返回上一页实现代码： <PageHeaderWrappertitle{false}content{<a onClick{() > router.goBack()}><Icon type"left" />返回</a>}breadcrumb{{routes: [{ path: /, breadcrumbName: 首页 },{ path: /pay_orde…

编程日记2024/08/06 03:00:00

ruby 新建对象_Ruby面向对象编程的简介

ruby 新建对象by Saul Costa由Saul Costa Object-oriented programming (OOP) is a programming paradigm organized around objects. At a high level, OOP is all about being able to structure code so that its functionality can be shared throughout the application.…

编程日记2024/08/06 02:50:00