- 博客(30)
- 收藏
- 关注
RSS订阅原创 vscode添加less压缩成css的插件
第一步：安装插件：easy less第二步：fiel 文件-----preferences 首选项--------settings 设置----------搜索less第三步：添加下面代码，保存"less.compile":{"compress":true,//是否删除多余空白字符"sourceMap":false,//是否创建文件目录树，true的话会自动生成一个.css.map文件"out":...
2021-05-11 11:14:04
617
原创 小程序解决rich-text图片无法点击放大，无法播放视频问题:parser
小程序富文本插件 https://github.com/jin-yufeng/Parser下载在小程序中自定义组件，然后在需要的页面中引入即可第一步：自定义组件第二步：在文章页面引入自定义组件注意：要给图片替换样式，否则图片会超出屏幕宽度，（对请求回来的数据操作）var article = res2.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:blo..
2020-05-27 10:41:36
1672
原创 小程序聊天对话，每次都显示最新消息（让页面自动滚动到底部）
//页面自动滚动到底部 pageScrollToBottom:function(){ wx.createSelectorQuery().select('#scrollpage').boundingClientRect(function(rect){ // console.log(rect.height); wx.pageScrollTo({ scrollTop: rect.height, .
2020-05-13 10:42:08
3914
1
原创 小程序跳转页面保存radio或checkbox的选择状态
（如果radio或者checkbox在当前页面操作的话就不会存在状态不一致的问题，但是放在同一个页面就会导致想关闭弹框的时候不能用navigateBack()的效果来关------表达有点乱，看不懂就算了，总之现在变成了A、B两个页面）先说radio的：主要是利用页面跳转传值 和 修改页面栈来实现的（应该也是可以和checkbox用本地缓存来实现的，但是我已开始就这个了，所以没有改）...
2020-04-11 16:54:37
1716
原创 小程序实现tab标签页，并且每个标签页独立实现加载更多（上拉触底）
原理：如果是普通页面的上拉触底事件可用小程序提供的：onReachBottom函数；但现在是tab页，每个页面要独立进行滚动加载，这里用到了scroll-view的bindscrolltolower函数；注意：有些童鞋自己写完之后bindscrolltolower不起作用，要注意几个点：scroll-view的高度设置没有设置，或者直接设置成100%，没有设置scroll-y="tr...
2020-03-30 10:54:47
2071
3
原创 小程序某标签滚动到某个位置时，固定在页面顶部
效果：我不知怎么上传视频效果。。。方式一：用于要固定的元素前面的内容高度无法确定的情况下js：代码说明：这里选的指定元素不是导航栏本身，而是导航栏下面可滚动的内容，因为如果选择导航栏的话，它固定到顶部之后就无法恢复（因为它无法滑动，top值无法改变）。//监听页面滚动 onPageScroll:function(e){ //获取指定元素距离页面顶部的距离...
2020-02-29 13:02:55
3365
2
原创 小程序使用阿里图标
阿里图标链接：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.21）将需要的图标添加至项目（过程这里不在赘述，自己点击链接进去捯饬一下就会了）；2）复制图标项目css文件到小程序wxss文件中（详看截图）；3）在小程序中使用阿里图标：...
2020-01-11 10:05:00
220
原创 小程序省市区选择功能
如果想看把省市区选择封装在自定义组件中的，请看：https://mp.youkuaiyun.com/postedit/103914817这里就不放效果图了，详情请看上面的链接。wxml代码：<view class="address"> <view class="address-left">地区：</view> <view bindtap="sho...
2020-01-09 21:04:19
1457
原创 小程序自定义省市区选择组件，实现组件间通信
如果想看不是自定义组件的，而是在页面中直接写省市区选择的：https://mp.youkuaiyun.com/postedit?not_checkout=1包含知识点：1）如何自定义组件并调用（这里只是基本的知识，更多功能请自行查看官方文档）2）省市区选择功能（也可以叫三级联动？）（详看自定义组件的JS代码）3）自定义组件调用页面方法4）自定义组件传值给页面效果图：...
2020-01-09 20:54:15
1063
原创 字幕横向滚动jq、原生js两种方法
代码参考了别人的，但是都没有写原理或更详细的解释，在此总结一下。jq-原理：元素position定位，然后控制left的值，让left从最右边开始 慢慢减少到最左边直到超过自身宽度后，left（重新赋值）又从最左边开始。缺点：不用jq的animate的话闪屏比较严重，必须引入jq，如果是移动端用zepto则没有对应的animate方法。<!DOCTYPE html>...
2019-11-19 15:56:24
747
原创 多个列表，点击某个li或其他元素，传递不同的值给后台
传递的值命名方式：可以字母+数字html代码：<div class="search-address-content"> <div class="search-address-title">海南 </div> <ul class="search-address-list...
2019-09-23 16:50:06
782
原创 如何让定位元素高度影响页面其他元素
div定位后脱离文档流，则其高度不会影响父元素高度，但有时需要页面其他元素高度随着该定位元素高度变化而变化原理：js动态获取定位高度，然后动态赋值给其他元素的margin-top（只要是能改变距离顶部高度的属性都可以，根据实际需要）。如以下例子：效果图：html代码：<div class="building-page-fixed"> 这是定...
2019-09-23 16:24:01
455
原创 点击链接跳转到新页面并显示对应的tab标签页切换
原理：从页面A跳转到页面B，则在A页面中跳转页面时传值，然后在B页面中写js获取该值并做对应的操作附：tab标签页的制作链接：https://mp.youkuaiyun.com/postedit/101053138页面A代码：<a href="2楼盘.html?1">二手房</a><a href="2楼盘.html?2">租房</a>页...
2019-09-23 15:45:05
4060
原创 tab标签页
摘要：自己写、js(jq)做成标签页，样式自行添加。效果图：//html<div class="building-page-attr"> <ul class="building-attr-tab"> <li onclick="tab('t...
2019-09-20 10:40:59
249
原创 不对顶部元素定位，通过css让后面的元素内容区域滚动
注：移动端可用，PC端未经测试，应该也是通用的给需要滚动的区域添加：overflow: auto;position: absolute;------让该元素浮于文档流之上top: 50px;bottom: 0;---------top和bottom值可自行设置，既可滚动的区域。...
2019-09-18 15:41:46
237
原创 pc端、移动端插入背景音乐，自动播放，循环播放
css代码（让音乐小图片在播放的时候自动旋转）：.close_music_div img{ animation:run 5s linear 0s infinite;}@keyframes run{ from{ -webkit-transform:rotate(0deg); } to{ -webkit-transform:ro...
2019-07-13 17:16:53
2071
原创 阻止子元素继承父元素的点击事件
如点击某元素后弹出的遮罩层，而在关闭遮罩层时：如果不设置事件冒泡，点击事件绑定在当前元素（一般都会绑定在最外层的元素上），则当前元素及其子元素被点击的时候遮罩层都会关闭，如果不想子元素点击时也关闭遮罩层，就要给最外一层的子元素绑定点击事件，阻止事件冒泡。原理：想在哪一层阻止事件冒泡就在哪一层元素绑定，即阻止了父元素事件继续向下渗透。效果图：代码区：<div id="sh...
2019-03-23 11:24:32
2493
原创 隐藏文字多余部分并以省略号来显示
文字太长想隐藏，以...来表示有很多文字的意思，类似于微信的列表页效果图：步骤：给当前装文字的标签（块级）限制一定宽度，并设置以下样式 white-space:nowrap; overflow: hidden; text-overflow: ellipsis;...
2019-03-23 10:34:59
596
原创 移动端聊天（类似微信）——显示最新消息、输入框随内容自适应高度、模仿发送消息后清空输入框并恢复初始高度
ps:对应的html代码请参考我写的https://mp.youkuaiyun.com/postedit/87929498 一、显示最新消息即：页面一加载，或发送消息的时候，都能显示最新的消息，让滚动条保持在底部。参考了：http://www.cnblogs.com/hnyei/archive/2011/09/20/2182199.html 但是他提供的方法中，我试了一下，只有scrollInt...
2019-02-26 11:12:54
3658
1
原创 移动端聊天（类似微信）——静态页面样式
ps:其他相关功能js请查看我写的 “移动端聊天（类似微信）——” 系列博客https://blog.youkuaiyun.com/weixin_44558497/article/details/87930338静态页面样式，主要也是参考了别人写的（用的时候没注意保存链接，现在写总结找不到了，尴尬。。。），不过他给的历史消息文本域是span，发送消息的时候不能保留空格和换行，我这里改成了pre（...
2019-02-26 10:21:59
5627
2
原创 图片压缩上传
实现图片压缩后上传，判断图片的宽高，如果超过多少就等比缩放。（这段脚本是参考别人的来写的）脚本还不够成熟，还需要完善，也请大神看看哪里有问题给点意见，谢谢！（或者如果谁有更好的压缩方式，也请提供一起学习~）html代码截图： （看我划的重点即可，其他类名是框架的可以忽略）js代码截图：js代码复制区：/* * 图片压缩 * img 原始图片...
2019-02-11 10:44:11
162
原创 监测两个标签（链接、按钮）的变化（如选择性别：先生/女士），让对应存值的标签发生改变
有时候在使用某些框架现成的样式时，没有用表单标签来写 先生/女士 ，而是用a标签或者按钮等普通标签，那就没有value值直接传给后端，需要我们自己定义一个隐藏的普通标签来存放对应的value值。即：点击先生，span的值变成2；点击女士，span的值变成1。效果图：1、html代码截图：html代码复制区： <div class="item-input row sex">...
2019-02-02 10:10:02
387
原创 如果一段文字长度超过了一定值则出现展开收起功能；如果不超过该值，则正常全部显示
以高度106px为例，文字总高度超过了106px则出现“展开”字样，点击展开后显示全部文字，字样变成“收起”；如果不超过该值，则正常全部显示。效果图：1、html代码截图：html代码复制区：<div class="sur-car show-hide" id="sh1"> <div class=...
2019-02-01 10:46:15
4907
3
原创 js监测checkbox复选框已选中个数，可限制最多选几个
点击某标签（eg:客户意向楼盘），出现弹出框（eg:楼盘复选框列表），监测checkbox复选框（楼盘）已选中个数，并实时显示；可限制最多选中个数。效果图：1、部分html代码：（类名称有些是框架里面的，可忽略；样式请自行调整）html代码复制区： <div>客户意向楼盘：</div> <div> ...
2019-01-31 11:02:10
6266
原创 select多选框在移动端和PC端的不同表现
select多选框的整体思路是：将被选中的值连成字符串后赋值给某标签（以input、div标签为例）即可，下面会进行详细说明。ps：PC端和移动端的js代码写的不太一样，但是原理是一样的（因为第一个是我写的，另一个是别人写的…）。整体效果图：一、select多选框在PC端的表现，类似于下拉框，可自己调整宽高，需要配合Ctrl键进行多选。为了宽高不规整影响页面样式，可对option进行定位并...
2019-01-29 11:32:30
8962
4
原创 文本框输入手机号限制（只能输入不超过11位的数字），移动端输入手机号文本框获取焦点后弹出数字键盘
文本框输入手机号限制，只能输入不超过11位的数字，不能输入其他字符；移动端输入手机号文本框获取焦点后弹出数字键盘，而非拼音键。1、html代码：代码复制区：<input type="tel" placeholder="请输入您注册的手机号！" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')">属性type=...
2019-01-26 10:30:00
9538
原创 jQuery：验证身份证输入是否满足正则表达式要求
验证身份证是否满足要求，若不满足：在文本框失去焦点时给出提示信息，文本框获取焦点时提示信息消失。效果图：1、html代码：代码复制区： <div> 证件号： <input type="text" placeholder="请填写" class="shenfencard" required> ...
2019-01-18 15:39:32
1171
原创 jQuery：监听文本框数字变化实时计算价格，如：贷款=成交价-首付，贷款会随着成交价、首付任何一个值的变化而实时变化
jQuery、zepto：监听文本框数字变化实时计算价格，如：贷款=成交价-首付，贷款会随着成交价、首付任何一个值的变化而实时变化效果图：1、html代码：（样式请自行调整）代码复制区：//type="number"起到限制文本框输入其他字符，只能输入数字。成交价：&lt;input type="number" placeholder="请填写" id=&a
2019-01-18 11:08:38
654
原创 jQuery：textarea限制字数，并显示总字数和已写字数
textarea限制字数，并在右下角实时显示总字数和已写字数，已写字数包括：从键盘录入，或者从数据库获取的默认可编辑的文字
2019-01-18 09:33:37
3501
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人