![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
半眸子
这个作者很懒,什么都没留下…
展开
-
css3 3D转换实现书本翻页效果
最简单的翻页效果实现。之前找了别人做好的代码看了一下,但是有点小复杂,虽然效果很好看,但是可能一开始看不太懂,所以做了个最简易版的。 简单易懂,css里面的注释的地方是我自己一开始走的弯路,所以建议看之前最好要先仔细学习下3D转换的各个属性。 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="原创 2021-03-27 18:01:59 · 426 阅读 · 0 评论 -
微信小程序图片高度按照图片真实宽高比自适应
原理:image组件bindload属性 前端在按照设计图定的宽度做好图片的宽高之后,如果图片的原始宽高比对应不上,那么图片就会出现拉伸变形的情况,虽然微信小程序有mode属性可以对图片进行适应,但是会有部分显示不完全或者会有留白,而且如果不给image组件设置高度或者设置为auto时,图片的宽度为0。 后来我发现了image组件的bindload属性 我发现event.detail 里给出的宽和高是图片的原始宽高,那么我们就可以根据这个宽高得出图片的宽高比,在宽度一定时就可以做到高度自适应而不会拉伸变形或原创 2021-03-23 14:46:26 · 1559 阅读 · 0 评论 -
微信小程序 自定义日期选择器
自定义日期选择器(当前起) 微信有自带的日期选择器,但是安卓苹果样式会有差别,而且按钮样式无法修改,无法做到与整个小程序设计样式一致,所以就需要自定义一个。 这里需要用到picker-view组件。 wxml 代码 <view class="picker-view"> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px;" value="{{date}}" bindchan原创 2021-03-18 15:23:27 · 1037 阅读 · 0 评论 -
微信小程序scroll-view点击导航栏滚动到对应位置
微信小程序scroll-view点击导航栏滚动到对应位置scroll-into-viewcreateSelectorQuery scroll-into-view 微信小程序提供了点击滚动到相应元素的属性,这个会将对应的元素滚动到scroll-view的顶部,但是如果内部有吸顶元素时,就会被覆盖一部分,这时候就需要用到微信小程序的另一个api。 createSelectorQuery 返回一个 SelectorQuery 对象实例。 const query = wx.createSelectorQuery原创 2021-03-13 15:25:17 · 1315 阅读 · 0 评论