1 获取屏幕高度与宽度
var h = document.documentElement.clientHeight || document.body.clientHeight;复制代码
var k = document.documentElement.clientWidth || document.body.clientWidth复制代码
2 swiper轮播
html 复制代码
jsvar swiper = new Swiper(".swiper-container", { autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: true }, loop: true, autoplayDisableOnInteraction: false, pagination: { el: ".swiper-pagination" }, effect: "fade", fade: { crossFade: true } });复制代码
引入swiper的css和js
3 监听浏览器变化
$(window).resize(function() { 函数内容 }复制代码
4 判断是否是pc
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ]; var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; }复制代码
5 输入框不允许输入负值(购物车)
(parseInt((select_arr[s].goods_count.replace(/\D/g,''))==''||parseInt((select_arr[s].goods_count.replace(/\D/g,''))==0)?'1':select_arr[s].goods_count,10))(parseInt((需要判断的值.replace(/\D/g,''))==''||parseInt((需要判断的值.replace(/\D/g,''))==0)?'1':需要判断的值,10))复制代码
6 小程序的横向滚动
xml
复制代码 服装 服装服装 服装 服装 服装服装 服装 服装 服装服装 服装 服装 服装服装 服装 服装服装 服装 服装服装 服装 服装 服装服装
css
.head_list{ display: flex; justify-content: flex-start; flex-wrap: nowrap; flex-direction: row; align-items: center; height: 100rpx;}.head_item{ display: inline-block; color: #333; border-bottom: 1rpx solid transparent; font-size: 32rpx; text-align: center; line-height: 90rpx; padding: 0 15rpx}.head_item_act{ color: #01c885; border-bottom: 1rpx solid #01c885}复制代码
注意点:
1 scroll-view 设置为横向滑动scroll-x="true"
2 scroll-view的css要设置为 white-space: nowrap,不换行
不要用 display: flex;,这样可能存在兼容问题,在android手机上可能滑动不了
3 scroll-view的子节点的css要设置为 display: inline-block;不然可能显示有问题
4 去除横向滚动条,如果要禁用横向滚动条的显示需要在page界面的样式布局里面加上,不要在组件或者模块的样式布局里面加
::-webkit-scrollbar { width: 0; height: 0; color: transparent;}复制代码
图片
7 数组添加元素
var arr = [1,2,3]arr = arr.push(4)console.log(arr) 4arr.push(4) console.log(arr) [1,2,3,4]复制代码
arr.push() 返回的是数组的长度,而不是新数组
8 $(this).hide() 与$(this).remove()
hide()如果被选的元素已被显示,则隐藏该元素。
remove() 方法移除被选元素,包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。
在写jQuery扩展的时候需要遇到这个问题:在页面第一次自己的代码的时候数据完整(页面动态添加的下拉框数据添加正确)
在第二次执行js时候,console.log()可以打印正确的数据,但是页面的下拉框没有动态添加数据。
原因在与 我使用了hide隐藏节点,修改为remove移除节点的时候页面正常执行。
8 截取字符串
var meeting_id=getQueryVariable("id"); 链接中的参数名是id //获取参数 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i
8 for循环
遍历数组中的对象 只要有一个对象的值为空 就跳出循环
var arr = [ { name: "zhangsan", age: "18" }, { name: "zhaoliu", age: "13" }, { name: "zhaoliu", age: "12" }, { name: "zhaoliu", age: "19" } ]; // console.log(arr) var flag = true; for (var i = 0; i < arr.length; i++) { for (x in arr[i]) { if (arr[i][x] == "") { flag = false; break; } } if (flag == false) { break; } console.log(11); } if(flag){ console.log('执行函数') }else{ console.log('放弃') } //arr[i].x //打印是undefined //arr[i][x] // 打印是对象的值复制代码
9 vue中的a链接渲染
需要的href加:
:href="';new_content.html?article_id=';+item.essay_id"复制代码
:href="'链接'+参数"复制代码
10 文件的命名
最好不要用点命名
job.detail 会出错 js可以正常使用 但是在有些代码是不会执行复制代码
job_detail jobDetail 最好复制代码
11 concat链接数组
直接将两个数组连接 如果在后台拿到数据最好不要使用 . 的拿取数据的方式获取数组然后连接数组,最好将需要连接的两个数组各自直接使用变量赋值然后连接
var arr = 原数组; var _r = 新数组数据; var _c = arr.concat(_r); 连接 原数组 = _c; 数组赋值复制代码
/** * * @param {*} old_r 原有数组 * @param {*} new_r 新数组 需要连接到原有数组之上 */ _Arr_concat(old_r,new_r){ var arr = old_r; var _r = new_r; var _c = arr.concat(_r); old_r = _c; console.log('连接数组') return old_r },复制代码
12 ul li
修改 列表的圆圈样式
ul li { content: "."; color: #3b63a6;}复制代码