![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端笔记
早点睡觉不要脱发
已经比别人落后就要更加努力
展开
-
微信小程序实现悬停效果的实现笔记
想要上滑页面,土黄色的区域悬停在屏幕顶部.实现思路:在没有滑动到顶部时,正常流式布局,当土黄色悬停块到顶时设置为position:fixed;top:0,固定在顶部,同时因为脱离文档流所以下方内容会突然顶到屏幕上方被悬停块遮挡一部分,所以使用一个隐藏view,宽高与悬停块一样,即可正常显示wxml代码:<view class="top">不用管我</view><view class="{{isFixed ? 'stop_top stop' : 'stop_top'}}.原创 2020-11-03 09:45:14 · 1927 阅读 · 0 评论 -
学习下js的promise
[初学promise对于promise形象的比方,理解帮助挺大]https://segmentfault.com/a/1190000017312249#comment-area另一个大佬的见解https://www.jianshu.com/p/a99030ac7a8a先放着,等有了自己的见解再来原创 2020-10-16 09:12:51 · 80 阅读 · 0 评论 -
小程序遮罩层与弹出导航栏的通用实现
点击目录出现左侧边导航栏,右侧粉紫色为遮罩层,点击遮罩层退出侧边栏回到文章内容思路:文章内容为底层,绝对定位建立一个标签.在底层之上再建立一个绝对定位view当做遮罩层,左侧淡黄色侧边栏默认绝对定位在屏幕左侧-60%,触发目录的点击事件之后将绝对定位从left:-60%改为left:0,这样一个width:60%的侧边栏就出现了,再通过js与css中的代码即可实现一个动画弹出效果,上传下重要代码wxml:<!--侧边栏实现--><view class="showView" wx.原创 2020-09-29 09:56:30 · 1289 阅读 · 0 评论 -
小程序学习css点击左侧导航栏右侧具体元素自动换行排列
想要实现这样的样式,直接贴上代码后面方便再次使用wxml:<!--左侧导航栏--><scroll-view class="scrollleft" scroll-y> <view class="scrollleftV {{curId == item.id ? 'chosen' : 'notChosen'}}" wx:for="{{leftArr}}" wx:key="id" data-id="{{item.id}}" catchtap="clickTitle".原创 2020-09-27 14:55:34 · 367 阅读 · 0 评论 -
小程序css 设置view元素居中
赶鸭子上架的前端第四天:想要设置红底灰框的元素居中css:display:inline; line-height: 50rpx; margin-left: 20rpx; margin-right: 20rpx; background-color: lightgray; border-radius: 20rpx; padding-right: 20rpx; padding-left: 20rpx; text-align: center;之前display是inline-flex,想要自己定义长宽高和外.原创 2020-09-25 17:59:04 · 829 阅读 · 0 评论 -
小程序css实现横向滚动
刚刚从零开始接触前端,赶鸭子上架记录下自己的问题.要做一个动态获取标题的可横向滚动栏,记录下css样式wxml:<scroll-view class="scrollout" scroll-x> <view wx:for="{{outArr}}" wx:key="key" data-id="{{item.id}}" class="outArr {{outCurId == item.id ? 'isChosen' : 'notChosen'}}" catchtap="cli原创 2020-09-25 17:10:08 · 368 阅读 · 0 评论