代码片段

1 获取屏幕高度与宽度

var h = document.documentElement.clientHeight || document.body.clientHeight;

var k = document.documentElement.clientWidth || document.body.clientWidth

2 swiper轮播

  html    
          <div class="swiper-wrapper  ">            <a href="" class="swiper-slide" target="blank">              <img class="banner_img" src="./img/banner1.png" alt="" />            </a>            <a href="" class="swiper-slide" target="blank">              <img class="banner_img" src="./img/banner2.png" alt="" />            </a>            <a href="" class="swiper-slide" target="blank">              <img class="banner_img" src="./img/banner3.png" alt="" />            </a>          </div>

js
var 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

<view class='head' >    <scroll-view class='head_list' scroll-x='true' tyle="width: 100%">      <view class='head_item' >服装</view>      <view class='head_item' >服装服装</view>      <view class='head_item head_item_act' >服装</view>      <view class='head_item' >服装</view>      <view class='head_item' >服装服装</view>      <view class='head_item' >服装</view>      <view class='head_item head_item_act' >服装</view>      <view class='head_item' >服装服装</view>      <view class='head_item' >服装</view>      <view class='head_item' >服装</view>      <view class='head_item' >服装服装</view>      <view class='head_item head_item_act' >服装</view>      <view class='head_item' >服装服装</view>      <view class='head_item' >服装</view>      <view class='head_item head_item_act' >服装服装</view>      <view class='head_item' >服装</view>      <view class='head_item' >服装</view>      <view class='head_item' >服装服装</view>    </scroll-view>  </view>

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)    4

arr.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<vars.length;i++) {            var pair = vars[i].split("=");            if(pair[0] == variable){return pair[1];}        }        return(false);    }

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;}