git
文章平均质量分 52
不会git,你想干啥
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
微信小程序实现圆形菜单弹出选中动画
微信小程序实现圆形菜单弹出选中动画原创 2022-09-27 01:35:43 · 2582 阅读 · 2 评论 -
微信小程序实现tabbar凹凸圆选中动画
微信小程序实现底部tabbar凹凸圆选中动画原创 2022-09-20 14:22:53 · 2643 阅读 · 8 评论 -
css实现炫酷的圆环相交转动动画
css实现炫酷的圆环相交转动动画原创 2022-08-24 23:31:08 · 2000 阅读 · 0 评论 -
微信小程序实现课程表
微信小程序实现一个可爱的课程表原创 2022-08-12 00:09:22 · 14470 阅读 · 1 评论 -
微信小程序实现活动倒计时
微信小程序实现活动倒计时原创 2022-08-04 00:09:37 · 1596 阅读 · 0 评论 -
vue中基于iview封装支持搜索选中的Tree组件
vue中基于iview封装支持搜索选中的Tree组件原创 2022-07-11 22:34:59 · 2163 阅读 · 4 评论 -
css实现弹出菜单动画(微信小程序)
1.实现效果2.实现原理定义一个菜单列表,图标,名称,跳转路由menuList: [ { name: '菜单一', src: 'https://i.postimg.cc/Bn1XpkSn/susu.jpg', url: '' }, { name: '菜单二', src: 'https://i.postimg.cc/Gm7KjGmN/111.jpg', url: '' }, {原创 2022-03-24 23:26:52 · 5632 阅读 · 0 评论 -
微信小程序实现拆红包动画
1.实现效果2.实现原理wx.createAnimation(Object object):创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。点击红包,弹出红包弹框,用到过渡动画this.animation.translate('-50%', '-50%').step();关闭弹框this.animation.translate('-50%', '100%').step();原创 2022-03-24 00:05:24 · 2255 阅读 · 0 评论 -
微信小程序实现单选跳跃选择动画
1.实现效果2.实现原理wx.createAnimation(Object object):创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性Animation.translateY(number translation):在 Y 轴平移的距离,单位为 pxwx.createSelectorQuery():获取相应id的高度拿到当前列表数据的高度+当前选中小圆点的高度,计算出tra原创 2022-03-20 20:10:44 · 918 阅读 · 0 评论 -
微信小程序rotateZ实现卡片翻转
1.实现效果2.实现原理css的filte:hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。css的transform:rotateZ(deg)rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。动态的设置hue-rotate和rotateZ角度,实现页面切换,并改变背景颜色同时设置图片hue-rotate与父原创 2022-03-19 20:17:06 · 4018 阅读 · 1 评论 -
vue实现多个tab标签页的切换与关闭
1.实现效果2.实现原理vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理。将vuex中的数据保存到sessionStorage中,避免页面刷新丢失,当浏览器关闭时,清空数据。通过ref定位,拿到当前窗口宽度与当前所在路由的tab标签的所有宽度,判断两者,实现对多tab超出窗口宽度的处理。当点击tab标签页的时候,获取相应的激活项,动态的实现左侧菜单栏的选中状态,用watch监听,updateActiveName和upda原创 2022-03-06 23:45:20 · 9689 阅读 · 0 评论 -
微信小程序scroll-into-view实现页面定位
1.实现效果2.实现原理A页面有list,包含n条数据,跳转到B页面,带参,参数为当前数据的索引(或其他数据,唯一值即可)B页面,同样有n条数据,onload接参数,拿到数据的索引,得到传过来的数据B页面的list,用scroll-view展示,scroll-x,并设置scroll-into-view为toView,值为某子元素id(id不能以数字开头),为每条数据设置id,取值‘view{{index}}’B页面,根据onload拿到的索引,动态的设置toView为view+当原创 2022-03-06 00:08:48 · 3049 阅读 · 0 评论 -
git如何回滚到某一个分支
1. 查看所需回退的版本拿到你想要回退版本的commit_idgit log2.如何回退git reset --hard HEAD^ 回退到上个版本git reset --hard commit_id 退到/进到 指定commit_id回退之后,将回退的版本推送到远程分支上git push origin HEAD --force3.如何重新回到最新版本git refloggit reflog:查看所有分支的所有操作记录(包括commit、reset、已经被原创 2022-02-24 22:08:09 · 4294 阅读 · 0 评论 -
微信小程序实现加载进度条
1.实现效果2.实现原理2.1第一个线条加载,设置translate3d属性,动态的改变百分比,实现加载。translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达,分别表示他在三个方向上移动的距离。translate3d(tx, ty, tz)tx是一个 代表移动向量的横坐标。ty是一个 代表移动向量的纵坐标。tz是一个 代表移动向量的z坐标。它不能是 值;那样的移动是没有意义的。transform: translate3d(-{{10原创 2022-02-23 23:48:55 · 3986 阅读 · 2 评论 -
如何用console.log打印图文?
1.consoleconsole是全局变量window(或global)下的一个对象,在控制台打印console,可以发现他提供了很多方法。 console.log(console)2.占位符 console.log("打印的字符串是:%s", "123"); console.log("%o", document.body); console.log("打印的整数是:%d", 111.00); console.log("打印的浮点数是:%f", 111.00);3.打印文字和图片原创 2022-02-15 11:19:09 · 1785 阅读 · 0 评论 -
微信小程序实现关键词高亮
1.实现效果2.实现原理1.将搜索的值与列表中的每一项进行对比,如果那一项indexOf(搜索值)!=-1,则表示这项中含有该关键字,处理列表,为这一项设置相应的属性。2.split将字符串和搜索值拆分成数组,循环数组。3.实现代码<view class="head flex-row"> <view class="head_input"> <image src="/img/search_icon.png" class="search_icon">&原创 2022-02-15 00:23:59 · 2652 阅读 · 2 评论 -
微信小程序播放背景音乐
1.实现效果2.实现原理1、wx.getBackgroundAudioManager :获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始,若需要在小程序切后台后继续播放音频,需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效,正式版还需通过审核。2、onUnload和onHide事件中暂停音乐的播放。3、onSho原创 2022-01-07 23:06:03 · 5124 阅读 · 2 评论 -
微信小程序实现多图片下载
1.实现效果2.实现思路wx.getSetting:获取用户授权。wx.downloadFile:下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 200MB。wx.saveImageToPhotosAlbum:保存文件到本地。3.实现步骤1.设置一个can_click参数,防止重复点击。2.对图片数组进行处理,当选中图片之后,设置改项为选中状态,显示选中状态(蒙层+选中),并将选中项push进一个新数组。3.原创 2022-01-06 12:54:55 · 5669 阅读 · 3 评论 -
微信小程序实现自定义input输入框
1.实现效果2.实现原理1.微信小程序的input不支持letter-spacing的属性2.将input的宽度设置成250%(注意,父元素需要设置overflow:hidden,否则在苹果手机上将出现滑动),并设置absolute定位将input输入框定位出当前页面。3.将input输入的值用absolute定位到4个框框里面,设置letter-spacing将文字隔开。3.实现代码/* pages/subPack/customIpt/index.wxss */.dialog_pop03原创 2021-11-15 19:26:53 · 10093 阅读 · 0 评论 -
微信小程序实现卡片翻转的效果
1.实现效果2.实现代码// pages/subPack/roateY180/index.jsPage({ /** * 页面的初始数据 */ data: { }, showb1() { this.setData({ styleA: 'transform:rotateY(180deg)', styleB: 'transform:rotateY(0deg)' }) }, showb2() { this.setData(原创 2021-11-12 01:14:40 · 2223 阅读 · 0 评论 -
微信小程序一定高度文字的展开与收起
1.实现效果2.实现思路1.给文字设置相应的行高,假设想展示10行文字,此时设置一个最大高度是10*文字的行高。2.获取当前文字盒子的整体高度,若大于设置的高度,添加overflow:hidden,height:最大高度;反正不添加样式,不显示箭头。3.显示展开的箭头提示,当点击展开箭头时,切换图片,并不设置最小高度,文字展开。3.实现代码<view class="con"> <view class="tips"> <view class="{{hei原创 2021-11-11 19:39:36 · 2441 阅读 · 0 评论 -
css渐变+伪元素实现卡券样式
1.实现效果2.实现原理渐变用到的是:radial-gradientlinear-gradient标题 3.具体实现demo1:.circle01 { width: 300px; height: 100px; position: relative; background-color:#ff6810 ; background:radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left/3原创 2021-10-31 23:03:34 · 511 阅读 · 0 评论 -
js实现图片上一张下一张点击
1.实现效果2.实现原理根据数组的长度和一个div的宽度,计算出父元素的长度。document.getElementById("goods_bx").style.width=goods_list.length * 271 + 'px';当点击上一张或下一张的时候,设置他的margin-left。document.getElementById("goods_bx").style.marginLeft=mr * 271 + 'px';为这个父元素再添加一个父元素,设置他的overflow-x为原创 2021-09-25 03:02:18 · 935 阅读 · 0 评论 -
css的filter属性
1.官方文档注意:Internet Explorer 不支持 filter 属性https://www.runoob.com/cssref/css3-pr-filter.html2属性2.1给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;2.2brightness给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更原创 2021-09-07 18:22:58 · 519 阅读 · 0 评论 -
vue实现上传图片
1.实现效果2.input标签的属性multiple:是否多选<input type="file" multiple="multiple" accept="image/*" /> accept:文件格式,这个可以控制文件格式,比如jpeg和gif还有Png之类的<input type="file" multiple="multiple" accept="image/png,image/gif,image/jpeg" /> capture表示,可以捕原创 2021-09-05 02:08:42 · 226 阅读 · 0 评论 -
css如何实现三角形,箭头,提示框,来一探究竟吧
1.给一个矩形设置border,来看如何变化<section><h4>来看一个正常的矩形变化过程</h4> <div class="b"> <div class="b1">设置了border正常宽高</div> <div class="b2">border-top</div> <div class="b3">border-right</div> <div cl原创 2021-09-01 09:40:43 · 772 阅读 · 0 评论 -
微信小程序自定义loading加载动画组件
1.实现效果2.组件介绍3.部分代码// components/loading/index.jsComponent({ /** * 组件的属性列表 */ properties: { // 是否显示弹框 is_show:{ type:Boolean, value:false }, l_width:{ type:Number, value:150, }, l_height:{原创 2021-08-31 10:25:14 · 1515 阅读 · 0 评论 -
css的conic-gradient+linear-gradient+radial-gradient
1.什么是conic-gradientconic-gradient是圆锥渐变,原创 2021-08-30 16:10:48 · 898 阅读 · 1 评论 -
微信小程序自定义loading加载动画(4)
1、实现效果2.实现原理animation+纯css写爱心,五角星等3.完整代码loading动画持续更新,通过自己总结,并向一些优秀的前端开发者学习得来的结果,希望小伙伴们可以关注star一波~(不断更新,大家互相学习哈)https://gitee.com/susuhhhhhh/wxmini_demo...原创 2021-08-28 21:05:23 · 1383 阅读 · 0 评论 -
微信小程序自定义loading加载动画(3)
1.实现效果2.实现原理animation3.实现代码<view class="circle-spin"> <text>加载中</text> </view>.circle-spin{ width: 100px; height: 100px; box-sizing: border-box; border-radius: 50%; border-top: 10px solid #8072a1; /* border-bo原创 2021-08-26 17:36:46 · 731 阅读 · 0 评论 -
微信小程序自定义loading加载动画(2)
1.实现效果2.实现原理animation3.实现代码.loading-row{ width: 100%; display: flex; justify-content: space-around;}.loading-cell{ width: 100%; text-align: center;}.circle-line{ width: 100px; height: 100px; display: inline-block; position: relat原创 2021-08-26 17:30:08 · 589 阅读 · 0 评论 -
微信小程序自定义loading加载动画(1)
1.实现效果2.实现代码<view class="ring"> <view>sss</view> <view class="line"></view></view>.ring { position: relative; margin: 40rpx auto; width: 80px; height: 80px; text-align: center; line-height: 80px;原创 2021-08-26 17:03:35 · 1245 阅读 · 0 评论 -
微信小程序自定义swiper组件
1.实现效果2.组件介绍3.部分代码// components/swiper/index.jsComponent({ /** * 组件的属性列表 */ properties: { imgUrls:{ type:Array, value:'' }, autoplay:{ type:Boolean, value:false }, interval:{ type:String,原创 2021-08-25 00:28:45 · 484 阅读 · 0 评论 -
微信小程序实现星星评分组件(原生)
1.实现效果2.组件介绍3.部分代码// components/rating/index.jsComponent({ /** * 组件的属性列表 */ properties: { stars:{ type:Array, value:[1,1,1,1,1] }, // 是否只读 readOnly:{ type:Boolean, value:false, }, // 星星大小原创 2021-08-24 01:03:58 · 1180 阅读 · 0 评论 -
根据wx.actionSheet封装的操作菜单组件
1.实现效果2.组件介绍3.部分代码// components/actionSheet/index.jsComponent({ /** * 组件的属性列表 */ properties: { // 是否显示弹框 is_show:{ type:Boolean, value:false }, // 是否显示取消按钮 cancelText:{ type:String, value:'取消'原创 2021-08-22 03:28:57 · 195 阅读 · 0 评论 -
根据wx.showModal封装的组件(微信小程序)
1.实现效果2.组件介绍3.部分代码// components/toastModal/index.jsComponent({ /** * 组件的属性列表 */ properties: { is_show:{ type:Boolean, value:false }, title:{ type:String, value:'提示' }, content:{ type:String原创 2021-08-21 00:22:01 · 912 阅读 · 0 评论 -
微信小程序video自定义播放与暂停按钮
1.实现效果2.实现原理官网:https://developers.weixin.qq.com/miniprogram/dev/component/video.html相关API:wx.createVideoContext(string id, Object this)属性:3.此demo所用到的属性有controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)muted:是否静音show-play-btn:是否显示视频底部控制栏的播放按钮show-center-pl原创 2021-08-06 11:12:00 · 6039 阅读 · 1 评论 -
微信小程序自定义圆弧背景
1.实现效果2.实现原理方法一:设置伪元素after,根据需要的弧度,设置圆的宽度。圆的高度越高,幅度越大。方法二:利用margin-left和margin-top将一个完整的圆移出去相应的位置。本文采用的是方法一!3.完整代码(更多小程序代码请移步码云)https://gitee.com/susuhhhhhh/wxmini_demo4.部分代码.head_top{ width: 100%; height: 100rpx; position: relative; z-ind原创 2021-08-03 17:53:51 · 1617 阅读 · 0 评论 -
git stash怎么使用
1.首先用git status 查看哪些文件被修改了2.git stash3.git stash list4. git stash clear(注意这个是将所有的stash都清空)5.git stash pop”,恢复最近的缓存到当前文件中,同时删除恢复的缓存条目。6.git stash drop stash@{0} 删除指定的stash即可...原创 2021-08-01 03:50:31 · 216 阅读 · 0 评论 -
cover-view覆盖canvas
1.实现效果2.实现原理https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html覆盖在原生组件之上的文本视图。目前原生组件均已支持同层渲染,建议使用 view 替代。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。组件属性的长度单位原创 2021-07-23 09:32:57 · 1906 阅读 · 0 评论