自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(13)
  • 收藏
  • 关注

原创 小程序1rpx,边框不完整或线条太粗

在小程序中使用1rpx时,在边框可能会显示不全。用1px可以解决显示不全的问题,但是真机上线条太粗。解决方法:利用 css 的 伪元素::after+transfrom进行缩放.border1::after{ position: absolute; content: ''; border:1px solid #8BAFFF; border-radius...

2020-03-20 22:38:39 2144

原创 小程序预览线上pdf等文件

实现方法:1.直接使用web-view<web-view:webview-styles="webviewStyles"src="xxxxx"></web-view>该方法只在ios有效2.使用小程序api,wx.downloadFile先下载文件再用wx.openDocument打开文件wx.downloadFile({ url: 'http:...

2020-03-16 22:26:59 1497

原创 小程序实现v-html,将搜索结果中搜索的文字标记

在小程序中做搜索功能时,有需求要将搜索的文字标记为蓝色。实现方式:1.使用小程序组将rich-text,将内容用正则匹配并用<span style="color:#1D57D8">${this.inputValue}</span>替换<rich-text :nodes="item.articleLabel"></rich-text>...

2020-03-16 22:18:38 918

原创 小程序scroll-view设置flex-grow:1时滚动失效

有时候我们想让scroll-view占满屏幕剩余部分,于是就想到了flex-grow:1,但是发现在开发工具上有效,但是到了真机上就不能滚动了。原因时scroll-view设置纵向滚动时必须要设置一个具体的高度。解决方案:给scroll-view加一个父元素,设置flex-grow:1,在页面加载时获取父元素的高度并赋值给scroll-view。<view class="sc...

2020-03-15 22:48:43 1926

原创 小程序实现h5锚点效果

小程序实现锚点效果最简单的方法就是通过scroll-view的scroll-into-view属性来实现。<view class="scrollWrap"> <scroll-view scroll-y:scroll-with-animation="true":style="{ height: scrollHeight+'px' }":scroll-into-vi...

2020-03-15 22:37:57 330

原创 小程序scroll-view横向滚动失效,内容被压缩

用scroll-view做横向滚动时,给scroll-view设置了display:flex,子元素宽度固定,并且总长度超出scroll-view的宽度,但是发现滚动不了,并且子元素宽度被压缩了。解决方法:给scroll-view设置white-space: nowrap;给子元素设置display: inline-block;<scroll-view class="scro...

2020-03-15 22:17:40 1314

原创 小程序scroll-view滚动时会有滚动条

在安卓手机上,scroll-view滚动时会有滚动条出现解决方法:给scroll-view加上样式::-webkit-scrollbar { width: 0; height: 0; color: transparent;}

2020-03-15 22:05:32 1384

原创 swiper滚动失效,不断抖动问题

目前只在安卓上出现这个问题,在小程序从后台运行重新切回后,swiper滚动失效并且不断抖动。解决方法:1.将@change改成@animationfinish 2.加上if (e.target.source == 'autoplay' || e.target.source == 'touch')代码展示: 第一张解决方案:<swi...

2020-03-15 21:52:27 1397

原创 js轮播图

                                   &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播&lt;/title&gt; &lt;style&gt;

2018-07-28 15:53:22 154

原创 微信小程序picker组件改变点击触发区域

&lt;picker style="position: absolute;left:0;top:0;text-align: right;width: 100%"&gt; &lt;view style="position: absolute;left:0;top:0;text-align: right;width: 100%;padding:10px 0"&gt;&lt;/view&gt;...

2018-06-25 19:44:20 14126 1

原创 微信小程序radio\switch\checkbox等组件样式修改

switch大小修改: .wx-switch-input{width:42px !important;height:20px !important;}.wx-switch-input::before{width:41px !important;height: 20px !important;}.wx-switch-input::after{width: 18px !important...

2018-06-02 10:59:15 4484 3

原创 js map()函数用法

一个数组中有类型为text的对象,也有类型为number的对象,现在用map()函数实现遍历并重组,将text类型的对象放入text数组中,将number类型的对象放入number数组中。var memo=[{type:'text',content:'abcdefg'},{type:'number',content:'12345678'}]var text=[],number=[]m...

2018-05-30 15:07:28 11366 4

原创 js比较时间大小

/*年月日 正则表达式*/var startDate='2018-05-25'var endDate='2018-05-26'var date1 = new Date(startDate.replace(/\-/g, "\/"));var date2 = new Date(endDate.replace(/\-/g, "\/"));if(date1 &gt;= date2) { ...

2018-05-26 17:56:29 633

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除